发送 axios 获取请求时如何修复 CORS 策略错误？

Question

我已经尝试了许多与我在这里搜索的方法不同的方法来尝试解决这个问题，但到目前为止，它们都没有奏效。

当我不添加任何标题时，我得到以下 header：

但是，当我添加它们时，我会收到此错误：

我尝试在package.json中添加域作为proxy ，因为我使用了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 标头无法由浏览器设置，它们是响应标头（来自服务器），而不是请求标头（来自客户端）。 出现此问题是因为您请求的域不允许浏览器中的源请求该资源。

Artsy 这样做可能是作为一项安全功能：他们不希望其他网站加载他们未明确添加的资源。 您可能无权访问 Artsy 的服务器代码。 您可能可以在他们的控制台/仪表板/管理员中的某处添加您的应用程序 URL。 也许某处也有 localhost 设置，然后您可以在开发时打开它。 或者您可以编辑您的 HOSTS 文件，以便您的网页 url ( http://example.com ) 路由到 127.0.0.1