有没有办法修复从 Laravel 到 nodejs/expressjs 客户端的 CORS api 调用？ [复制]答案

【问题标题】：Is there any way to fix CORS api calls from Laravel to a nodejs/expressjs client? [duplicate]有没有办法修复从 Laravel 到 nodejs/expressjs 客户端的 CORS api 调用？ [复制]
【发布时间】：2019-08-29 05:46:52
【问题描述】：

我在 nodejs/expressjs 中开发了一个 api，我正在使用 Postman 进行测试，它工作正常，但是当我在 Laravel 中使用 axios 调用进行测试时，它不起作用。

我收到以下错误：

从源“https://account.loc”访问“https://api.xxxxxxx/api/v1/connectors/mysql/test”处的 XMLHttpRequest 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 x-csrf-token。

和

错误：网络错误
在 createError (app.js:18565)
在 XMLHttpRequest.handleError (app.js:18449)

警告：

跨域读取阻塞 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应 https://api.xxxxxxxxx/api/v1/connectors/mysql/test。详情请见https://www.chromestatus.com/feature/5629709824032768。

我尝试在我的 API 的标头中添加 CORS，如下所示：

// token verification
router.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
...

我在在线测试 API 网站上进行测试并且调用工作正常，所以现在我想知道 Laravel 配置中是否缺少一些东西。我意识到 API 客户端从不从标头中读取令牌（仅在 Laravel + axios 中）。有人可以帮我吗？

谢谢！

【问题讨论】：

真的只是在这里猜测，但我想说 Axios 已配置为将 x-csrf-token 添加到所有 AJAX 请求中，假设没有外部请求。您应该覆盖/删除此特定请求的标头。
我试过这个 Phil 但我只是创建了一个全新的 axios 实例来发出 ajax 请求，所以没有使用任何 Laravel 默认标头。但是谢谢:)

标签： node.js laravel express vue.js axios

【解决方案1】：

由于 x-csrf-token 被 CORS 策略阻止。您必须在 index.php in laravel 文件中添加 Access-Control-Allow-Headers，您可以在 public 文件夹 中找到该文件。将解决您的问题。现在将以下行粘贴到 laravel 的 index.php 文件中。

header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, X-XSRF-Token, Origin');

希望能解决你的问题

【讨论】：

嘿！这对我不起作用，我仍然遇到同样的错误。你认为这可能与我的 Laravel 安装有关吗？我在多个 Laravel 安装中进行了测试，但我无法让它工作。如果您有任何其他建议，请告诉我。谢谢！
我认为你应该使用 jwt 令牌而不是 CSRF 令牌，因为它适用于无状态 api 但 csrf 令牌适用于会话，所以它不适用于无状态 api
Access-Control-Allow-Headers 值可能是从另一个解决方案复制粘贴的。 Laravel 需要这个设置 => Access-Control-Allow-Headers: X-CSRF-TOKEN, X-Requested-With

【解决方案2】：

在node.js /express.js中安装cors的包

【讨论】：

我喜欢这样：` app.use(cors()); app.options('*', cors());但现在我得到： OPTIONS api.xxxxxxx.com/api/v1/connectors/mysql/test net::ERR_CONNECTION_REFUSED;我补充说你能帮我吗？谢谢
res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With') 你可以试试这个

【解决方案3】：

消息说，x-crsf-token 标头在 express 应用程序中不被支持。您应该将其添加到您的快速应用程序中。或者在 cors 中禁用预检。

【讨论】：

修复了 1 条消息，但 cors 问题仍然存在。我意识到 Laravel 发送了 2 个请求，一个是 OPTION，另一个是 POST，问题出在 POST 上。
是的，实际上 laravel 在标题上请求了 OPTIONS，你应该接受它，所以在你的 express 应用上允许 x-crsf-token 标题。 github.com/expressjs/cors#configuration-options这部分其实是描述的。
其实 laravel 发送 2 个 headers：X-CSRF-TOKEN 和 X-Requested-With。必须同时接受它们才能允许 CORS 调用。