API 调用被 CORS 阻止，即使 Access-Control-Allow-Origin : * 存在于 headers

Question

API 来自 React 站点的调用不断被 CORS 阻止，即使 React 应用程序和 api 都使用 Access-Control-Allow-Origin : * header 以及允许的方法 'GET,PUT,POST,DELETE,OPTIONS' 和 cors 凭据也是允许的

这是准确的错误：

Access to XMLHttpRequest at 'https://cbiapi.dailycode.tk/parse/classes/_Installation' from origin 'https://backoffice.dailycode.tk' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

网站 URL : https://backoffice.dailycode.tk/login API url : https://cbiapi.dailycode.tk/parse

我不明白为什么我的 api 调用仍然被阻止，我尝试了 CORS everywhere 插件和其他同类插件，但调用仍然被阻止

Answer 1

您的客户端请求（基于请求中的内容）触发了跨源 pre-flight 检查。这意味着浏览器将向您的客户端发送一个 OPTIONS 请求（发送到请求的相同 URL）并且它希望返回 2xx 状态以允许 CORS 请求。

任何数量的事物都可以触发 pre-flight 请求。其中包括大多数习俗 headers 和许多 content-types，而不仅仅是一对。

您可以在 this other answer and you can read about it on MDN here 中查看更多内容。

您的 API 服务器需要处理 OPTIONS 请求。您没有显示任何相关的 API 服务器代码，但是如果 URL 是 https://cbiapi.dailycode.tk/parse 并且服务器环境是 Express，您需要在 API 服务器：

app.options("/parse", cors(), (req, res) => {
    res.sendStatus(204);
});

如果您希望部分锁定，可以将其调整为仅允许某些来源。此示例将允许所有来源从浏览器进行跨来源访问。

API 调用被 CORS 阻止，即使 Access-Control-Allow-Origin : * 存在于 headers

API calls blocked by CORS even with Access-Control-Allow-Origin : * present in headers

nginx

cors

express

nginx-reverse-proxy