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

Posted 2023-03-04

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

【英文标题】：API calls blocked by CORS even with Access-Control-Allow-Origin : * present in headers

【发布时间】：2021-03-21 08:53:09

【问题描述】：

即使 react 应用程序和 api 都使用 Access-Control-Allow-Origin : * 标头以及允许的方法 'GET,PUT,POST,DELETE,OPTIONS' 和 cors 凭据提供服务，但来自 react 站点的 API 调用仍然被 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 无处不在的插件和其他类似的插件，但调用仍然被阻止

【问题讨论】：

请显示发送请求的实际客户端代码。某些内容类型和自定义标头需要额外的步骤来允许 CORS 请求。在发送这些请求之一时，您通常还可以通过查看浏览器中 Chrome 调试器的“网络”选项卡来了解很多信息，因为它会准确显示从服务器发送和返回的内容。例如，它会显示您的 CORS 请求是否已被归类为需要预检的请求，在这种情况下，您必须为 OPTIONS 请求实现服务器端处理程序。

请参阅this other answer，了解有关简单请求和预发送请求的讨论。

现在我在您的错误消息的详细信息中看到您的请求触发了飞行前检查，因此您可能没有该飞行前请求的服务器端处理程序。

看到你在没有我共享客户端代码的情况下发现了问题 :p 并不是我不想共享客户端代码，而是客户端使用 Parse Server SDK，所以请求是从我从未做过的那个库发出的任何要求我自己

【参考方案1】：

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

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

您可以在 this other answer 中看到更多信息，您可以在 MDN here 上阅读。

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

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

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

【讨论】：

这解决了我的问题，我的 api 不使用 OPTIONS 并且添加这个解决了我的问题，谢谢