Javascript：CORS 策略已阻止从源“http ...”获取“https ..”的访问权限 [重复]

Posted 2023-02-21

【中文标题】Javascript：CORS 策略已阻止从源“http ...”获取“https ..”的访问权限 [重复]

【英文标题】：Javascript: Access to fetch at 'https..' from origin 'http...' has been blocked by CORS policy [duplicate]

【发布时间】：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 标头。 ***.com/questions/45752537/… 的答案解释了原因。还要从您的 fetch 调用中省略 Access-Control-Allow-* 标头。 Access-Control-Allow-* 标头是响应标头，而不是请求标头。尝试将它们设置为请求标头的唯一影响是它会触发 CORS 预检 OPTIONS 请求。正如我提到的答案中所述，Slack API 不支持接收 OPTIONS 请求。

【参考方案1】：

在 POST 请求之前发出一个 OPTION 请求。 OPTION 请求从服务器头接收：

    "Accept": "application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "*"

如果后面的请求使用了允许的方法，...是一个允许的来源并且是一个'application/json请求，...一切都很好！

【讨论】：

我很困惑。我知道帖子没有发布。

'localhost:3000' 无法向 'hooks.slack.com/services/XXXXXXXXX/XXX/XXXX' 发出请求。