进行 axios.get 调用时出现 CORS 错误

Posted 2023-03-04

【中文标题】进行 axios.get 调用时出现 CORS 错误

【英文标题】：CORS error while making axios.get call

【发布时间】：2016-05-11 21:16:39

【问题描述】：

我正在使用 axios 在我的 redux action.js 文件中进行 axios.get 调用。 在我的组件中，此操作是在表单提交时执行的。

我在控制台中收到状态 200，但没有收到任何回复。 我收到以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:\\\\localhost:3000' is therefore not allowed access.

有没有人也遇到过这样的错误？请您分享一下如何解决这个问题。

【问题讨论】：

Mozilla explains this issue very well, have a look.

@TimoSta - 那我该如何解决呢？我在代码中添加了以下内容，但仍然出现相同的错误 --- var config = headers: 'Access-Control-Allow-Methods': 'GET,PUT,PATCH,POST,DELETE', 'Access-Control -Allow-Origin': '*', 'Content-Type': 'application/json' ; const request = axios.get(url,config);

@TimoSta -- 谢谢你的链接，为了解决这个问题，我必须在我的服务器快速应用程序中安装 CORS 模块并将其用作中间件。我只是想知道我是否可以在我的客户端请求中做任何事情来克服这个问题。请让我知道是否有任何这样的方法。因为当我使用邮递员或任何浏览器发出请求时，它不会导致任何此类问题。因此，也许我也可以将一些东西添加到我的客户端请求中，这也可以解决这个问题。只是好奇。

【参考方案1】：

问题不在于 axios。问题出在服务器上。当您提供数据时，您必须在发送之前添加以下标头。

访问控制允许来源 必须设置为 *

访问控制允许标头 必须设置为 来源、X-Requested-With、Content-Type、接受

【讨论】：

我怎样才能为 API 调用做到这一点？

我已经看到这出现在完全相同的代码上，这些代码在一个环境中运行良好，而在不同的环境中却没有。在这两种情况下，服务器完全相同。前端位于 Chrome 上，并打开了 CORS 切换。我 100% 的 COR 在服务器端得到了正确处理。所以我很难过。出了点问题。

但是在使用 axios 时我该怎么做呢？

【参考方案2】：

我在解决这个问题时遇到的第一个困惑是理解预检请求的含义。所以我将从那里开始。

只要请求不符合这些条件，浏览器就会发送预检请求：

HTTP 方法匹配以下之一（区分大小写）： 获取 发布 头 HTTP 标头匹配（不区分大小写）： 接受 接受语言 内容语言 最后一个事件 ID Content-Type，但仅当值为以下之一时： application/x-www-form-urlencoded 多部分/表单数据 文本/纯文本

预检请求是使用 OPTIONS 方法发出的，该方法包括三个额外的标头，如果没有为 CORS 配置，您的服务器可能不会期望这些标头。它们是：

访问控制允许标头 访问控制允许来源 访问控制允许方法

如果服务器未针对 CORS 进行配置，它只会以具有 HTTP 状态代码 200 的空标头进行响应。一旦您为 CORS 配置了服务器，您应该将上面列出的标头作为 CORS 支持的标头包含在内。

这应该会清除错误并允许您与服务器通信。

注意：虽然您的服务器可以处理您创建的自定义标头（在我的例子中，Authorization 用于 JWT 身份验证），但它很可能不会针对 CORS 请求进行配置。如果您有权访问您的服务器，只需了解如何为该服务器配置 CORS。

有关 CORS 的更多信息。见https://www.html5rocks.com/en/tutorials/cors/

【参考方案3】：

这对我有用：

axios.create(
    baseURL: "http://localhost:8088"
  ).get('/myapp/user/list')
    .then(function(response) 
      callback && callback(response);
      debugger;
    )

【参考方案4】：

请试试这个.. 它适用于我的情况 crossdomain: true 。

axios.get(`http://localhost:4000/api`, crossdomain: true ).then((result)=>
        console.log("result",result.data.result.[0].name);
      ).catch((error)=>
        console.log("Error hey",error);
      );