使用带有 fetch API 的“no-cors”模式时，请求标头未按预期设置

Question

我有一个请求，其中请求类型似乎正在改变，这弄乱了我的帖子。 我提交了我的基本表格（只有一个字段）。 这是取物。

      handleSubmit(event, data) {
    //alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
    console.log("SUBMIT STATE::", this.state.value);
    return (
        fetch("//localhost:5000/api/values/dui/", {
            method: "post",
            mode: 'no-cors',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json',                  
            },
            body: JSON.stringify({
                name: this.state.value,
            })
        }).then(response => {
            if (response.status >= 400) {
                this.setState({
                    value: 'no greeting - status > 400'
                });
                throw new Error('no greeting - throw');
            }
            return response.text()
        }).then(data => {
            var myData = JSON.parse(data);
            this.setState({
                greeting: myData.name,
                path: myData.link
            });
        }).catch(() => {
            this.setState({
                value: 'no greeting - cb catch'
            })
        })
    );


}

但是，当我在 fiddler 中查看此内容时，内容类型现在是“内容类型：文本/纯文本；字符集 = UTF-8”。 这是原始的 Fiddler：

POST http://localhost:5000/api/values/dui/ HTTP/1.1
Host: localhost:5000
Connection: keep-alive
Content-Length: 16
accept: application/json
Origin: http://evil.com/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

内容类型：text/plain;charset=UTF-8 Referer: http://localhost:3000/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.8

{"name":"molly"}

在 DOM Inspector 中，我只看到：

POST http://localhost:5000/api/values/dui/ 415（不支持的媒体类型）

我也觉得奇怪的是“接受”和“内容类型”都是小写的。 发生这种情况的任何原因。 我还没有在我的搜索中找到任何具体的东西。

Answer 1

当为请求设置no-cors模式时，浏览器将不允许您设置除CORS-safelisted request-headers之外的任何请求标 头。 请参阅有关添加标头的规范要求：

要将名称/值 ( name / value ) 对附加到Headers对象 ( headers )，请运行以下步骤：

5. 否则，如果guard是“ request-no-cors ”并且name / value不是CORS-safelisted request-header ，则返回。

在该算法中， return等同于“返回而不将该标头添加到 Headers 对象”。

而是将其设置为text/plain;charset=UTF-8的原因是因为请求构造函数的算法调用了包含此步骤的提取正文算法：

打开object的类型：

↪ USVString

• 将Content-Type设置为text/plain;charset=UTF-8 。

Answer 2

所以这就是解决这个问题的方法，我将“no-cors”改为“cors”。 坦率地说，我以为我之前因为跨源问题而翻转了这些，因为我在本地开发工作站和我部署到的服务器之间遇到了跨域问题，但不用说，当我将其设置回模式：'cors'时，一切又恢复了. 本地工作站和服务器。 为什么会改变实际的请求标头，我不确定。 如果有人对此有答案，我会很乐意投票。

谢谢。