如何修复React.js与ASP.NET Core 6.0中的Axios网络错误？

你的错误是典型的跨域资源共享（CORS）问题——ASP.NET Core后端未配置允许前端https://localhost:3000发起跨域请求。以下是具体修复步骤：

1. 在ASP.NET Core 6中配置CORS #

ASP.NET Core 6通过Program.cs管理启动配置，你需要在这里添加CORS服务并启用中间件：

打开Program.cs，插入以下配置代码：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactOrigin",
        policy =>
        {
            // 指定允许跨域的前端地址，端口需与React项目一致
            policy.WithOrigins("https://localhost:3000")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

// 添加控制器服务
builder.Services.AddControllers();

var app = builder.Build();

// 启用CORS中间件（注意顺序：必须在UseRouting之后、UseAuthorization之前）
app.UseCors("AllowReactOrigin");

app.UseRouting();

app.UseAuthorization();

app.MapControllers();

app.Run();

开发环境下可临时使用AllowAnyOrigin()允许所有来源，但生产环境务必指定具体的可信域名：

policy.AllowAnyOrigin()
      .AllowAnyHeader()
      .AllowAnyMethod();

2. 优化后端控制器代码 #

控制器方法名login易造成误解，建议修改为更贴合功能的名称，同时处理未登录场景：

using Microsoft.AspNetCore.Mvc;

namespace test.API.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class HomeController : Controller
    {
        public class UserDetail
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Email { get; set; }
        }

        [HttpGet]
        public ActionResult<UserDetail> GetUserDetail()
        {
            var user = new UserDetail();
            // 处理未登录时User.Identity.Name为null的情况
            user.Name = User.Identity?.Name ?? "未登录用户";
            // 可补充Id、Email的赋值逻辑
            return Ok(user);
        }
    }
}

3. 修复前端React代码问题 #

• state中user初始化为数组不合理，后端返回单个用户对象，应改为null
• Axios响应中response.data直接是用户对象，无需访问response.data.user
• 渲染时添加条件判断，避免user为null时访问属性报错

修改后的App.js：

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';

class App extends Component {
    constructor(props) {
        super(props); 
        this.state = {
            user: null
        };
    }

    componentDidMount() {
        axios.get("https://localhost:****/api/home")
            .then(response => {
                console.log(response.data);  
                this.setState({ user: response.data });
            })
            .catch(err => console.log(err));  
    }

    render() {
        const { user } = this.state;
        return (
            <div className="row">
                {user ? (
                    <div key={user.Id}>
                        <p>用户名：{user.Name}</p>
                        <p>邮箱：{user.Email ?? "未设置"}</p>
                    </div>
                ) : (
                    <p>加载中...</p>
                )}
            </div>
        );
    }
}

export default App;

完成以上配置后，重启ASP.NET Core后端和React前端，跨域请求即可正常生效。

内容的提问来源于stack exchange，提问作者AkariSawamura