时间戳

首页 > 解决方案 > 如何修复在 React 中使用 axios 获得的“未处理的拒绝（错误）：网络错误”

reactjs - 如何修复在 React 中使用 axios 获得的“未处理的拒绝（错误）：网络错误”

问题描述

我正在创建一个 React 应用程序，它托管在 localhost:3000 上。我想从托管在 localhost:5001 上的 .NET Core 应用程序中获取数据。我正在使用 axios 库来发出 http 请求。

我提出请求的功能是：

async componentDidMount() {
    const data = await axios.get("http://localhost:5001/api/gateways");
    console.log(data);
  }

得到的Error为“Unhandled Rejection (Error): Network Error”。

我尝试使用 Postman 测试 API 并且它可以工作，以及从浏览器访问它并且它也可以工作。

同时，我尝试使用来自另一个 API 的数据，这次托管在在线服务器上，并且运行良好，这意味着问题一定是托管在 localhost 上的两个应用程序之间。

标签： reactjsapi.net-coreaxioslocalhost

解决方案

我通过将 Access-Control-Allow-Credentials 标头添加到 .NET CORE 应用程序中的 HTTP 响应来解决此问题。此标头告诉浏览器服务器允许跨域请求的凭据。

必要时在 Startup.cs 文件中修改Configure方法，添加以下代码：

app.Use(async (context, next) =>
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                await next.Invoke();
            });

而且，还需要修改ConfigureServices方法：

services.AddCors(c =>
            {
                c.AddDefaultPolicy(options => options.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod());
            });

推荐阅读