时间戳

首页 > 解决方案 > 即使使用 Access-Control-Allow-Origin 也被 CORS 阻止的 API 调用：* 存在于标头中

express - 即使使用 Access-Control-Allow-Origin 也被 CORS 阻止的 API 调用：* 存在于标头中

问题描述

来自反应站点的 API 调用不断被 CORS 阻止，即使反应应用程序和 api 都带有Access-Control-Allow-Origin : *标头以及允许的方法'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.

网站网址： https ://backoffice.dailycode.tk/login API 网址： https ://cbiapi.dailycode.tk/parse

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

标签： expressnginxcorsnginx-reverse-proxy

解决方案

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

任何数量的事情都可以触发飞行前请求。这些包括大多数自定义标题，以及许多内容类型，而不仅仅是一对。

您可以在这个其他答案中看到更多信息，您可以在此处阅读 MDN 上的相关信息。

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

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

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

推荐阅读