ASP.NET Web API因CORS策略阻止React+Axios请求问题求助

一、CORS问题修复方案 #

1. ASP.NET Web API端配置 #

步骤1：安装CORS依赖

如果未安装CORS包，执行以下命令：

Install-Package Microsoft.AspNetCore.Cors

步骤2：全局配置CORS策略（Program.cs）

将CORS中间件放在路由和控制器之前，确保请求先经过CORS校验：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略，允许指定前端源的跨域请求
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactClient", policy =>
    {
        // 替换为你的React应用实际地址，如http://localhost:3000
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials(); // 若需携带Cookie或认证凭证，必须开启此项
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 启用CORS策略，注意顺序要在UseRouting之前
app.UseCors("AllowReactClient");

app.UseRouting();
app.UseAuthorization();
app.MapControllers();

app.Run();

步骤3：控制器级启用（可选）

如果需要针对单个控制器配置CORS，添加[EnableCors]特性：

using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
[EnableCors("AllowReactClient")]
public class TestController : ControllerBase
{
    [HttpPost("login")]
    public IActionResult Login([FromBody] LoginRequest request)
    {
        // 登录业务逻辑
        return Ok(new { Success = true, Message = "登录成功" });
    }
}

// 强类型请求模型
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

2. React端Axios适配 #

确保请求地址正确，若需要携带凭证，开启withCredentials：

import axios from 'axios';

// 封装全局Axios实例
const apiClient = axios.create({
    baseURL: 'http://localhost:5000/api', // 替换为你的API地址
    withCredentials: true
});

const LoginComponent = () => {
    const handleLogin = async () => {
        try {
            const response = await apiClient.post('/test/login', {
                username: 'your-username',
                password: 'your-password'
            });
            console.log('登录结果:', response.data);
        } catch (error) {
            console.error('登录失败:', error.response?.data || error.message);
        }
    };

    return (
        <button onClick={handleLogin}>提交登录</button>
    );
};

export default LoginComponent;

二、代码优化建议 #

ASP.NET Web API端 #

• 用强类型模型接收参数：避免使用dynamic或JObject，像LoginRequest这样的强类型模型能提升代码可读性和类型安全性。
• 配置文件管理CORS源：将允许的前端源写入appsettings.json，方便开发/生产环境切换：

  {
    "AllowedOrigins": ["http://localhost:3000", "https://your-production-domain.com"]
  }
  

  读取配置的代码：

  var allowedOrigins = builder.Configuration.GetSection("AllowedOrigins").Get<string[]>();
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowReactClient", policy =>
      {
          policy.WithOrigins(allowedOrigins)
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials();
      });
  });
  

• 添加全局异常处理：自定义中间件捕获API异常，返回标准化错误响应，避免暴露敏感信息。

React端 #

• 封装Axios拦截器：统一处理请求头（如添加Token）、响应错误（如401跳转登录页）：

  apiClient.interceptors.request.use(config => {
      const token = localStorage.getItem('auth-token');
      if (token) {
          config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
  });
  
  apiClient.interceptors.response.use(res => res, error => {
      if (error.response?.status === 401) {
          window.location.href = '/login';
      }
      return Promise.reject(error);
  });
  

• 使用环境变量：将API地址写入.env文件，避免硬编码：

  REACT_APP_API_URL=http://localhost:5000/api
  

• 添加前端表单验证：在发送请求前校验用户名、密码格式，减少无效API请求。

内容的提问来源于stack exchange，提问作者Vamshi Krishna Vedantham