Axios-CORS策略问题

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"
}

但是如果我尝试通过浏览器发出请求（简单地通过复制和粘贴url），一切都很好。

有人知道怎么帮我吗？非常感谢！

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。这将取决于实际的后端实现，但大多数语言都有一个直接的html" target="_blank">解决方案。

这是否适用于浏览器,但不适用axios请求；这是因为CORS检查的是来自不同来源的请求，而不是来自公开URL的请求，比如您的客户机。浏览器只是从它自己的原点呈现资源，而不是交叉的原点。阅读这篇文章是相当简洁和很好的解释：

https://blog.container-solutions.com/a-guide-to-solution-things-mystifying-cors-issues

希望这有帮助！