使用Fetch API发送POST请求的XML数据

Question

我正在尝试使用Fetch API来处理XML数据的POST，以避免XmlHttpRequest的跨域问题。但我面临的问题是，尽管将Content-Type设置为'text/xml'（这是此情况下唯一支持的内容类型标头），但我的请求的内容类型被重置为text/plain，导致请求的内容返回415 HTTP状态。

以下是我的fetch函数：

    function doFetch(Content)
    {
        return fetch(
        URL, { method: 'POST',
           mode: 'no-cors',
           headers: new Headers(
           {'Content-Type': 'text/xml; charset=utf-8',
            'Accept': '*/*',
            'Accept-Language': 'en-GB',
            'Accept-Encoding': 'gzip, deflate',
            'Connection': 'Keep-alive',
            'Content-Length': Content.length                
            }),
            body: Content
           });
    }

内容是一段XML数据字符串。

而这是实际使用的标题：

    Content-Length:1537
    content-type:text/plain;charset=UTF-8

我想知道我正在尝试的操作是否可行，如果可以，那么我做错了什么？（我对Web开发还比较新手）。

谢谢！

- Krisisonfire

Answer 1

因为您正在设置请求的mode: 'no-cors' （为什么？…），所以浏览器将不允许您设置除CORS安全请求头之外的任何请求头。请参见规范要求：

…如果 guard 是 "request-no-cors"，并且name/value不是CORS安全请求头，则返回。

设置Content-Type：text/xml; charset=utf-8使其不再成为CORS安全请求头，只有当Content-Type 的值为application/x-www-form-urlencoded、multipart/form-data或text/plain时，它才是CORS安全请求头。

因此，解决方案的开始部分是不使用mode: 'no-cors'。

通常情况下，唯一需要设置mode: 'no-cors'的情况是使用Service Workers缓存响应，因为对于mode: 'no-cors'请求，浏览器不会让您的脚本访问响应的任何属性，因此您唯一有用的做法就是将其缓存。

我正在尝试使用Fetch API处理XML数据的POST请求，以避免使用XmlHttpRequest出现跨域问题。

Fetch API遵循与XHR相同的跨域请求模型，因此不清楚您试图通过使用Fetch API避免什么跨域问题...

- sideshowbarker

---

啊，谢谢。这就解释了为什么它正在被更改！跨域的问题在于我尝试访问的资源没有处理OPTIONS请求的任何方法。由于CORS问题，使用Internet Explorer 11及更早版本的某些原因允许我发送和接收而没有问题，但任何“现代”浏览器，如Edge、Chrome等都会给我一个HTTP 404响应。 - Krisisonfire

Answer 2

Cors或跨域访问意味着如果您没有在响应头中显式指定Allow-Cross-Origin-Acess标签，则无法在不同IP或甚至端口的2个服务器之间传输数据。从客户端发送此标记是无效的，它必须在响应头中。

- Ionut Eugen