Axios - CORS 政策问题答案

【问题标题】：Axios - CORS Policy IssueAxios - CORS 政策问题
【发布时间】：2021-06-24 04:50:29
【问题描述】：

我正在尝试发出一个简单的 axios 请求，如下所示（我正在使用 Vue.js）：

axios
 .get(url),
 .then(({ data }) => {
    // ...
 })
 .catch(err => console.log(err))

但我收到以下错误：

Access to XMLHttpRequest at 'url' from origin 'http://localhost:8080' 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.

Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:84)

我已经尝试添加以下标题，但还是不行

headers: {
   "Access-Control-Allow-Origin": "*"
   "mode":"no-cors"
}

但如果我尝试通过浏览器发出请求（只需复制和粘贴 url）一切正常。

有人知道如何帮助我吗？非常感谢！

【问题讨论】：

CORS 警告来自服务器而不是客户端，在这种情况下是您的 axios 调用，您能否向我们提供有关您正在使用的后端的更多信息，您定义为 url 应该有什么为您的请求启用 CORS
我的网址如下所示：api.taapi.io/…。 API 站点是这样的：taapi.io
更改我们的代码以使用此 url:jsonplaceholder.typicode.com/todos/1 ，它是一个占位符响应，我相信它应该可以工作，正如在需要在服务器而不是客户端上修复 CORS 问题之前指出的那样，如果你可以控制后端公开你需要在那里启用 CORS 的 url，那是 node.js 吗？
占位符响应工作正常。我无法控制后端。但是为什么如果我尝试通过浏览器发出请求（只需复制和粘贴 url）一切正常？
那是因为 CORS 检查的是来自不同来源的请求，与暴露 URL 的来源不同，例如您的客户端，如果是这种情况，它会检查其他来源是否有权获取资源。浏览器只是从它自己的来源呈现该资源，而不是交叉的。阅读这篇文章非常简洁且解释清楚：blog.container-solutions.com/…

标签： node.js vue.js axios cors

【解决方案1】：

总结一下：如果您没有在服务器端启用 CORS 的 API，但仍想使用该 API，那么您必须为您的应用程序编写 API 包装器。

这可能是一个 node.js express api，它只接受您的请求，然后将请求（使用 axios）转发到 api。不同之处在于，在 node.js 上下文中，您没有 CORS 的浏览器限制。

有一些蓝图，例如在 netlify。您还可以通过 google 找到大量示例。

【讨论】：

【解决方案2】：

只是总结问题中的cmets

CORS 代表跨域资源共享，它检查的是给定的客户端或源被授权“查看”另一个源的资源。只是认为您不希望任何人公开访问您的所有 API，对吗？使用 CORS，您可以指定谁可以访问什么。

在您的情况下，这不是可以在执行 axios 调用的 vue 客户端上解决的问题，您可以通过将请求 URL 更改为启用了 CORS 的内容来检查这一点：

axios
 .get('https://jsonplaceholder.typicode.com/todos/1'),
 .then(({ data }) => {
    // ...
 })
 .catch(err => console.log(err))

要解决此问题，后端需要在服务器级别或您尝试访问的特定 URL 启用 CORS。这将取决于实际的后端实现，但大多数语言对此都有直接的解决方案。

这是否适用于浏览器，但不适用于 axios 请求；这是因为 CORS 检查的是来自不同来源的请求，而不是暴露 URL 的请求，例如您的客户端。浏览器只是从它自己的来源呈现该资源，而不是交叉的。阅读这篇文章非常简洁且解释清楚：

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

【讨论】：

首先，非常感谢您为我付出的时间。我尝试使用 node.js（始终使用 axios）而不是 Vue.js（我刚刚创建了一个 javascript 文件并使用 node 编译它）发出请求，并且一切正常。这怎么可能？会不会是 Vue 的问题？
有道理，这就像创建一个反向代理，您可以在其中绕过浏览器检查和跨源，并按照您自己的条件公开资源，这个答案对此进行了一些解释：@987654322 @.
@FilippoAmenta 如果您查看@Jan 的答案，他们提到了The difference is, that in node.js context you do not have the browsers limitation of CORS。只有浏览器必须遵循 CORS，并且由于使用 Node.js 本质上是在创建 API，因此 CORS 问题在这里将无效。