统一修复同一应用程序中的所有 CORS 错误

Posted 2023-03-04

【中文标题】统一修复同一应用程序中的所有 CORS 错误

【英文标题】：Unified Fix for ALL CORS errors in the same app

【发布时间】：2020-11-25 17:09:30

【问题描述】：

我知道很多人都遇到过 CORS 问题。我搜索了很多，我找到了很多答案，但我仍然有错误。我尝试的方法解决了一些错误，但导致了其他所有 CORS 错误...

在我的应用程序中，我使用了两个 API：一个用于身份验证和 mysql 请求的 API，另一个是 openweathermap。对于后者，我找到了在 API url (http://api.openweathermap.org/ ...) 前面添加https://cors-anywhere.herokuapp.com/ 的解决方案。它运作良好。但是当我使用自己的 API 时，我仍然会出错。

我尝试使用相同的方法，但我的 axios 调用得到 404。

https://cors-anywhere.herokuapp.com/my_api.test/api/login 404 (Invalid host)

对于登录，它可以工作，但所有其他 API 调用都失败。我发现我可以在我的 API 中添加标题来帮助我：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

添加此项允许其他 API 调用成功但登录失败...有没有办法让我的所有 API 调用都成功？

错误信息：

Access to XMLHttpRequest at 'http://my_api.test/api/login' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin'
header contains multiple values '*, *', but only one is allowed.

【问题讨论】：

我认为您还需要更改后端中的一些代码。您使用哪种框架/语言编写 API？

我使用 Laravel 作为后端。

@Thbwun 您的 login 端点与其他 api 端点有何不同？

登录在另一个控制器中，并且 url 在另一个路由文件中（api.php 用于登录，web.php 用于其他）。我的控制器中的所有函数都以 return response()->json([]); 结尾，其中包含新创建的用户或我从数据库中检索到的数据。

【参考方案1】：

Laravel 既是问题也是解决方案。在 config 文件夹中有一个名为 cors.php 的文件来处理这个问题。默认情况下，仅管理路径 'api/'。添加标头解决了其他路径的问题，但导致路径 'api/' 出错。

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

只需将/* 中的/* 替换为config/cors.php 中的api/*，我就可以访问我的API 的所有路径而不会出现CORS 错误。