Laravel VueJS，Axios 看不到 CORS 标头，但 Postman 和浏览器可以

Posted 2023-03-04

【中文标题】Laravel VueJS，Axios 看不到 CORS 标头，但 Postman 和浏览器可以

【英文标题】：Laravel VueJS, Axios can't see CORS header but Postman and Browser do

【发布时间】：2020-09-13 09:26:04

【问题描述】：

让我们继续吧。

简介

向我的 API 发出 Axios GET 请求时，我遇到了这样的 cors 问题：

Access to XMLHttpRequest at 'http://localhost:8080/api/my-endpoint/' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我有什么

我在 Docker 上的 8080 端口上运行了我单独的 VueJs 应用程序和 Laravel 7 应用程序。我知道我的端点工作 100% 正常。我也使用Laravel cors package。

CORS 包配置

paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

我可以看到正在发生的事情

当我查看来自 Postman 或 Chrome 的 Laravel 端点的响应标头时，它们都包含以下内容：

Access-Control-Allow-Origin: *

所以从外观上看，标头就在那里，它附加到响应中。

问题

这里的问题是，由于某种原因，当 Axios 进行调用时，它根本不可见。

有人知道这里会发生什么吗？我确实从我能找到的所有 *** 页面中尝试了不同的解决方案，但似乎没有任何效果。

我明白我一定是在这里遗漏了一些愚蠢的东西，一些设置，或者某处的一些配置。

编辑 1：

我不确定我是否应该看到这个，但我看不到 Axios 发出预检请求，因此我看不到 Access-Control-Request-Method 标头是否正在发送。我不确定我是否应该看到这一点，但我可以看到这就是 Laravel 包在中间件中寻找的东西。

【问题讨论】：

我在 URL 上看到了不同的端口，第一个是 8080，而另一个是 8081，也许这就是问题所在？

@Makdous - 这就是它应该的样子。我的后端 Laravel 应用程序在本地 Docker 端口 8080 上运行。当我使用 npm run dev 运行它时，前端应用程序在 localhost 端口 8081 上启动，因为 docker 已经在使用 8080。这两个应用程序都可以正常运行。这只是这个 CORS 问题。他们无法交流。

@Makdous P.S 除非这是 Docker 或其他问题。但是，我看到 Youtube 上的人也使用这样的端口，所以我认为这不是问题。

在 chrome 开发控制台网络选项卡中，您应该看到 OPTIONS 请求。如果您看不到它，那么（出于某种原因）axios 没有发送它。如果有任何插件干扰，请尝试其他浏览器

axios 的浏览器“版本”包含XmlHttpRequest，因此最终是否要发送预检请求取决于浏览器。出于某种原因，浏览器似乎决定在您的特定情况下不发送。不知道为什么，通常如果你有不同的端口，即使它是相同的 IP，它也应该发送它。

【参考方案1】：

感谢 apokryfos（请参阅我的问题下的 cmets）我想出了答案。我并不容易，我仍然不确定这是否可行。

我希望这对其他人有所帮助。

所以我首先查看了THIS 的帖子。

我遇到的实际问题

真正的问题是没有从一开始就正确设置 CORS。

真正的问题是 chrome 没有发送 CORS 预检请求。 什么是预检请求？好问题。我会尽快回答。

我设法找到的解决方案

让我们从了解 CORS PREFLIGHT REQUEST 的真正含义开始。

CORS 预检请求是一个 CORS 请求，用于检查是否 理解 CORS 协议并且服务器知道使用特定的 方法和标头。

这是一个 OPTIONS 请求，使用三个 HTTP 请求标头： Access-Control-Request-Method、Access-Control-Request-Headers 和 源头。

预检请求由浏览器自动发出，正常情况下 在这种情况下，前端开发人员不需要制作此类请求 他们自己。当请求被限定为“成为 preflighted”，对于简单的请求省略。

所以通常浏览器会忽略SIMPLE REQUESTS 的 OPTIONS CORS 预检请求。

现在我当前的开发环境（一旦我在该系统上完成工作，可能是生产环境）有 npm run dev 在 localhost:8081 上运行，我的 Laravel 后端 API 在 localhost:8080 上的 Docker 上运行

这就是为什么我总是需要CORS PREFLIGHT 请求。我总是需要这个请求，因为至少对于开发来说，我的后端和前端应用程序总是与 CORS 政策相冲突。

结论

我仍然不确定这是否是正确的方法，但它有点道理。至少我的工作不再受阻。

当然，我的问题中的 CORS 设置将在我完成后更改为更安全。我认为从任何地方允许任何东西都不是一个好主意！

【参考方案2】：

我在处理 Vue.js 项目时遇到了同样的 CORS 错误。您可以通过禁用浏览器（例如，CHROME）的安全设置来访问跨源 API 来解决此问题。这个解决方案对我来说非常有效。此解决方案不需要构建任何模拟服务器或代理服务器。

您可以通过在 mac 终端上输入以下命令来禁用 CHROME 安全设​​置以从源访问 apis：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

在终端上运行上述命令后，将弹出一个禁用安全设置的新 chrome 窗口。现在，再次运行您的程序（npm run serve 或 npm run dev），这一次您不会收到任何 CORS 错误，并且可以使用 axios 获取请求。

希望这会有所帮助！

【讨论】：

恐怕这是非常糟糕的做法。通过这样做，您只是隐藏了稍后会出现的问题。这是需要注意而不是忽视的事情。