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

IT技术 javascript reactjs cors fiddler fetch-api
2021-03-25 07:38:01

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

      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(不支持的媒体类型)

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

2个回答

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

要将名称/值(名称/)对附加Headers对象(标头),请运行以下步骤:

  1. 否则,如果guard是 " request-no-cors" 并且name / value不是CORS-safelisted request-header,则返回。

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

而它被设置为的原因text/plain;charset=UTF-8是因为请求构造函数的算法调用了一个提取体算法,其中包括以下步骤:

打开object的类型:

USVString

  • 设置Content-Typetext/plain;charset=UTF-8

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

谢谢。