如何修复在 React 中使用 axios 获得的 "Unhandled Rejection (error): Network error"

Question

我正在创建一个 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 的数据，这次托管在在线服务器上，并且运行良好，这意味着问题一定出在本地主机上托管的两个应用程序之间。

Answer 1

我通过向 .NET CORE 应用程序中的 HTTP 响应添加 Access-Control-Allow-Credentials header 解决了这个问题。 header 告诉浏览器服务器允许 cross-origin 请求的凭据。

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

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

如何修复在 React 中使用 axios 获得的 "Unhandled Rejection (error): Network error"

How can I fix the "Unhandled Rejection (error): Network error" obtained using axios in React

api

localhost

reactjs

.net-core

axios