如何在Visual Studio ASP.NET Core React模板中实现前端本地调用WebApi

1. 修正BaseUrl配置 #

ASP.NET Core带React的整合模板在开发环境自带接口代理转发，生产环境前后端同域部署，不需要硬写固定后端端口，直接修改BaseUrl为相对路径即可：

// 适配本地开发和同域生产部署
export const BaseUrl = ""

如果需要同时兼容原公网独立部署的场景，可加环境变量判断：

export const BaseUrl = process.env.NODE_ENV === 'production' ? '你的公网后端接口地址' : ''

2. 确认代理配置匹配后端启动地址 #

基于Create React App的旧模板 #

检查ClientApp目录下的package.json文件，是否存在proxy字段，值要和你后端启动的地址一致：

• 用IIS Express启动后端："proxy": "http://localhost:44789"
• 用自宿主（Project2配置）启动后端："proxy": "https://localhost:5001"
  修改后必须重启前端开发服务器才会生效。

基于Vite的新版模板 #

在vite.config.js中配置服务代理：

export default defineConfig({
  server: {
    proxy: {
      // 所有/api开头的请求都会转发到后端
      '/api': {
        target: 'http://localhost:44789',
        changeOrigin: true
      }
    }
  }
})

3. 开发环境配置CORS（可选，仅硬写端口调用时需要） #

如果还是保留硬写后端地址的调用方式，需要在后端代码中开启开发环境CORS，修改Program.cs：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("DevAllow", policy =>
    {
        policy.WithOrigins("你的React前端开发服务器地址，通常为http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

// 中间件管道中开启开发环境CORS，注意放在路由匹配之后、授权中间件之前
if (app.Environment.IsDevelopment())
{
    app.UseCors("DevAllow");
}

4. 处理HTTPS匹配问题 #

你的IIS Express配置了SSL端口44367，如果后端开启了HTTPS重定向，前端请求HTTP的44789端口会被强制跳转到HTTPS端口，可选择以下任意一种方案处理：

• 关闭开发环境的HTTPS重定向
• 将代理地址/BaseUrl修改为后端的HTTPS地址
• 启动后端时选择对应带HTTPS的启动配置

5. 确认启动顺序 #

整合模式下需要先启动后端服务，再启动前端开发服务器，确保后端先占用对应端口，代理才能正常转发请求。

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