发送axios获取请求时如何解决CORS政策错误？

Question

为了解决这个问题，我尝试了许多不同的方法来解决问题，但是到目前为止，这些方法都没有奏效。

当我不添加标题时，会得到以下标题：

但是，当我添加它们时，却出现此错误：

我尝试过像使用proxy一样在package.json中将域添加为create-react-app，但是没有运气。

import axios from 'axios';

export default function getResponse(xappToken){
    console.log(xappToken);

    axios.get('https://api.artsy.net/api/v1/artists/popular', {
       headers: {
         'Access-Control-Allow-Origin': 'http://localhost:3000/',
         'X-Access-Token': xappToken,
         'Accept': 'application/json',
       }
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     })
     .then(function () {
       // always executed
     });
}

API文档：https://developers.artsy.net/v1/playground#/artists/getApiV1ArtistsPopular

Answer 1

您误解了CORS是什么。浏览器无法设置CORS标头，它们是响应标头（来自服务器），而不是 request 标头（来自客户端）。 出现此问题的原因是，您所请求的域不允许浏览器中的源请求该资源。

Artsy可能会将其作为安全功能：他们不希望其他网站加载未明确添加的资源。您可能无法访问Artsy的服务器代码。您可能可以在其控制台/仪表板/管理员中的某个位置添加应用程序URL。也许在某处也有本地主机设置，然后在开发它时可以将其打开。或者，您可以编辑HOSTS文件，以便您的网页网址（http://example.com）路由到127.0.0.1