使用VS React+ASP.NET Core模板时React调用自定义API返回404

1. 核对Vite代理配置的准确性 #

确保vite.config.ts中的代理配置与ASP.NET Core服务地址完全匹配，包括端口和路由前缀：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/clients': {
        target: 'https://localhost:5001', // 替换为你的ASP.NET Core实际运行地址
        changeOrigin: true,
        secure: false, // 本地自签HTTPS证书需设为false
        // 若服务端接口带/api前缀，需添加重写规则
        // rewrite: (path) => path.replace(/^\/clients/, '/api/clients')
      }
    }
  }
});

• 重点确认target地址是否与ASP.NET Core控制台输出的启动地址一致
• 若服务端接口有统一前缀（如api/），必须同步调整代理重写规则或请求路径

2. 检查Clients控制器的路由配置 #

确认控制器的路由特性无拼写错误，且与请求路径匹配：

[ApiController]
[Route("[controller]")] // 或带前缀的[Route("api/[controller]")]
public class ClientsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetClients()
    {
        // 业务逻辑
        return Ok(new List<object> { /* 返回数据 */ });
    }
}

• 控制器类名必须为ClientsController，ASP.NET Core会自动映射对应路由
• 若路由带api/前缀，React请求路径需改为/api/clients

3. 修正React中的请求路径 #

确保fetch路径与代理、服务端路由完全对齐：

// 服务端路由为/clients时
fetch('/clients')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// 服务端路由为/api/clients时
fetch('/api/clients')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

• 不要添加完整域名，代理会自动转发请求到服务端

4. 验证ASP.NET Core的CORS配置（代理失效时的备选方案） #

在Program.cs中添加CORS中间件，确保React开发地址被允许：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactDev",
        policy => policy.WithOrigins("http://localhost:5173") // Vite默认端口
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

var app = builder.Build();

// 必须在路由前启用CORS
app.UseCors("AllowReactDev");

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();

app.Run();

5. 重启服务并排查网络请求 #

• 修改配置后必须重启Vite开发服务器和ASP.NET Core服务
• 打开浏览器开发者工具（F12），查看Network标签：
  • 确认请求URL是否正确（如http://localhost:5173/clients）
  • 判断404响应来自Vite（代理配置错误）还是ASP.NET Core（路由配置错误）

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