使用 Axios 访问控制源头错误 [英] Access Control Origin Header error using Axios

问题描述

我正在 React Web 应用程序中使用 Axios 进行 API 调用.但是，我在 Chrome 中收到此错误:

<块引用>

XMLHttpRequest 无法加载https://example.restdb.io/rest/mock-data.不请求中存在Access-Control-Allow-Origin"标头资源.因此不允许使用原点 'http://localhost:8080'使用权.

{公理.get(https://example.restdb.io/rest/mock-data", {标题:{x-apikey":API_KEY"，},响应类型:json"，}).then((响应) => {this.setState({ tableData: response.data });});}

我还在 Stack Overflow 上阅读了几个关于同一问题的答案，标题为 Access-Control-Allow-Origin，但仍然不知道如何解决这个问题.我不想在 Chrome 中使用扩展程序或使用临时黑客来解决这个问题.请提出解决上述问题的标准方法.

在尝试了几个答案后，我已经尝试过这个，

标题:{'x-apikey':'59a7ad19f5a9fa0808f11931'，'访问控制-允许-来源':'*'，'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',},

现在我得到的错误是，

<块引用>

请求头域 Access-Control-Allow-Origin 不是预检响应中的 Access-Control-Allow-Headers 允许

解决方案

如果您的后端支持 CORS，您可能需要在请求中添加以下标头:

headers: {"Access-Control-Allow-Origin": "*"}

[更新] Access-Control-Allow-Origin 是一个响应标头 - 因此为了启用 CORS - 您需要将此标头添加到您的响应中服务器.

但在大多数情况下，更好的解决方案是配置 反向代理，这样您的服务器就能够将请求从前端重定向到后端，而无需启用 CORS.

您可以在此处找到有关 CORS 机制的文档:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

I'm making an API call using Axios in a React Web app. However, I'm getting this error in Chrome:

XMLHttpRequest cannot load
https://example.restdb.io/rest/mock-data. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. 

{
    axios
      .get("https://example.restdb.io/rest/mock-data", {
        headers: {
          "x-apikey": "API_KEY",
        },
        responseType: "json",
      })
      .then((response) => {
        this.setState({ tableData: response.data });
      });
}

I have also read several answers on Stack Overflow about the same issue, titled Access-Control-Allow-Origin but still couldn't figure out how to solve this. I don't want to use an extension in Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.

After trying out few answers I have tried with this,

headers: { 
  'x-apikey': '59a7ad19f5a9fa0808f11931',
  'Access-Control-Allow-Origin' : '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
},

Now I get the error as,

Request header field Access-Control-Allow-Origin is not
allowed by Access-Control-Allow-Headers in preflight response 

解决方案

If your backend support CORS, you probably need to add to your request this header:

headers: {"Access-Control-Allow-Origin": "*"}

[Update] Access-Control-Allow-Origin is a response header - so in order to enable CORS - you need to add this header to the response from your server.

But for the most cases better solution would be configuring the reverse proxy, so that your server would be able to redirect requests from the frontend to backend, without enabling CORS.

You can find documentation about CORS mechanism here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

这篇关于使用 Axios 访问控制源头错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！