【发布时间】:2019-06-19 20:07:33
【问题描述】:
当我运行这个命令时:
curl -X POST -H 'Content-type: applicatiojson' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/XXXXXXXXX/XXX/XXXX
一切都按照我想要的方式发布。但是,在 javascript 中,当我运行发布请求时:
fetch('https://hooks.slack.com/services/XXXXXXXXX/XXX/XXXX', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "*"
},
text: "Hello, world."
})
我不断收到错误:
Access to fetch at 'https://hooks.slack.com/services/XXXX/XXXX/XXXX' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
我认为这是问题所在:Deadly CORS when http://localhost is the origin 但后来我尝试打开我自己的 ngrok 并得到了同样的错误。我还尝试安装 Allow-Control-Allow-Origin chrome 扩展,但无济于事。 此外,正如您在我的代码中看到的那样,我将其设置为允许访问 CORS。最后,我尝试了Firefox,但仍然无法正常工作。有谁知道可能是什么问题?
【问题讨论】:
-
你试过在请求对象中设置
mode: 'cors'吗?见developer.mozilla.org/en-US/docs/Web/API/Request/mode -
@MattHolland 刚试了一下,还是不行:/oauth.access', {mode: 'cors',method: 'POST', ...
-
检查
curl -i -X OPTIONS -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/XXXXXXXXX/XXX/XXXX得到的HTTP响应 -
在您的 fetch 调用中省略 Content-Type 标头。 stackoverflow.com/questions/45752537/… 的答案解释了原因。还要从您的 fetch 调用中省略 Access-Control-Allow-* 标头。 Access-Control-Allow-* 标头是响应标头,而不是请求标头。尝试将它们设置为请求标头的唯一影响是它会触发 CORS 预检 OPTIONS 请求。正如我提到的答案中所述,Slack API 不支持接收 OPTIONS 请求。
标签: javascript reactjs cors