Question

我正在使用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.

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

Answer 1

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

使用-控制允许来源必须设置为 <强> *

使用控制允许报头必须设置为 来源，X-Requested-With，内容类型，接受

Answer 2

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

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

HTTP方法匹配（区分大小写）之一：
- GET
- POST
- HEAD
HTTP标头匹配（不区分大小写）：
- 接受
- 接受语言
- 内容语言
- 最后-事件ID
- Content-Type，但仅当值为以下值之一时：
  - 应用程序/ x-WWW窗体-urlencoded
  - 的multipart / form-data的
  - 文本/纯

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

接入控制允许接头
访问控制允许来源
接入控制允许的方法

如果服务器没有配置为CORS，它只会响应一个具有HTTP状态代码200的空标头。一旦为CORS配置了服务器，就应该将上面列出的标头包含在CORS支持的标头中。

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

注意：虽然您的服务器可以处理您创建的自定义标头（在我的情况下，Authorization用于JWT身份验证），但很可能无法配置CORS请求。如果您可以访问您的服务器，只需了解如何为该服务器配置CORS。

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

Answer 3

这对我有用：

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

Answer 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);
      });

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

4 个答案: