.NET 8.0 Minimal API+React集成：请求端口错误致404问题求助

核心问题分析 #

• 前端请求指向自身端口（5173）而非后端端口（5239），导致API接口404
• 启动项目时自动打开两个浏览器窗口（Chrome对应后端、Edge对应前端），不符合原有使用习惯

问题1：API请求404的修复 #

原因 #

.NET 8 弃用了.NET 3.1时期的Create React App代理机制，改用Vite作为前端构建工具，默认不会自动代理前端请求到后端；同时后端路由配置或前端请求路径可能存在错误。

修复步骤 #

1. 配置前端Vite代理

在React项目根目录（ClientApp）创建/修改vite.config.js，添加代理规则：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:5239',
        changeOrigin: true,
        secure: false // 本地开发忽略SSL证书验证
      }
    }
  }
}

2. 修正前端请求路径

确保React组件中所有API请求使用/api前缀，示例：

// 错误写法（指向前端5173端口）
fetch('/users/get')
// 正确写法（通过代理转发到后端5239端口）
fetch('/api/users/get')

3. 检查后端路由配置

验证Program.cs中是否正确启用控制器路由：

var builder = WebApplication.CreateBuilder(args);
// 添加控制器服务
builder.Services.AddControllers();
// 其他服务配置...

var app = builder.Build();
// 启用静态文件托管（需在路由之前）
app.UseStaticFiles();
// 映射控制器路由
app.MapControllers();
// 配置前端路由 fallback（可选，用于单端口托管）
app.MapFallbackToFile("index.html");

app.Run();

4. 验证控制器路由特性

确保UsersController的路由注解正确：

[ApiController]
[Route("api/[controller]")]
public class UsersController : ControllerBase
{
    [HttpGet("get")]
    public IActionResult GetUsers()
    {
        return Ok(new List<string> { "User1", "User2" });
    }
}

问题2：启动时打开两个浏览器窗口的修复 #

原因 #

.NET 8 默认配置了同时启动后端API服务和前端Vite开发服务器，并分别指定了不同浏览器；或launchSettings.json中存在多个启动配置且均设置了自动打开浏览器。

修复步骤 #

1. 修改launchSettings.json配置

找到项目根目录下Properties/launchSettings.json，根据需求二选一：

选项A：单端口托管（回到.NET 3.1模式）

删除ClientApp相关启动配置，保留https配置并确保启用前端托管：

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5239;http://localhost:5238",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

此配置下，启动后端后访问https://localhost:5239会直接加载前端，无需单独启动Vite。

选项B：保留前后端分离但统一浏览器

修改ClientApp配置，指定统一浏览器或关闭自动打开：

{
  "profiles": {
    // ...其他配置
    "ClientApp": {
      "commandName": "Executable",
      "executablePath": "npm",
      "arguments": "run dev",
      "launchBrowser": true,
      "browser": "chrome", // 指定统一使用Chrome
      "workingDirectory": "$(ProjectDir)/ClientApp",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

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