Question

我正在尝试创建一个看起来像这样的简单 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"
}

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

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

Answer 1

只是总结问题的评论

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

Answer 2

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

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

例如在 netlify 有蓝图。您还可以使用 google 找到大量示例。

Axios - CORS 政策问题

2 个答案: