使用 Fetch API 发布 XML答案

【问题标题】：Using Fetch API to POST XML使用 Fetch API 发布 XML
【发布时间】：2017-07-02 13:16:27
【问题描述】：

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

这是我的获取函数：

    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

只是想知道我正在尝试做的事情是否可行，以及是否是我做错了？（我对网络开发有点陌生）。

谢谢！

【问题讨论】：

标签： javascript xml post cors fetch-api

【解决方案1】：

因为您为请求设置了mode: 'no-cors'（为什么？...），所以浏览器不允许您设置除CORS-safelisted request-headers 之外的任何请求标头。见the spec requirements:

…如果守卫是“request-no-cors”并且名称/值不是CORS-safelisted request-header，则返回。

设置 Content-Type: text/xml; charset=utf-8 使其不再是 CORS 安全列表中的请求标头；如果Content-Type 的值为application/x-www-form-urlencoded、multipart/form-data 或text/plain，则Content-Type 只是一个CORS 安全列表请求标头。

所以这里的解决方案是不使用mode: 'no-cors'。

设置mode: 'no-cors' 通常有意义的唯一情况是，如果您使用 Service Worker 来缓存响应 - 因为对于 mode: 'no-cors' 请求，浏览器不会让您的脚本访问响应的任何属性，所以你可以用它做的唯一有用的事情就是缓存它。

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

Fetch API 遵循与 XHR 相同的跨域请求模型，因此不清楚使用 Fetch API 试图避免哪些跨域问题……

【讨论】：

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

【解决方案2】：

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

【讨论】：