如何在ASP.NET Core应用中配置React开发服务器解决跨端口访问问题

方案一：调整ASP.NET Core中间件顺序+配置路径代理（推荐，无需修改现有script标签） #

你之前配置的SPA中间件不生效的核心原因是中间件执行顺序错误：默认UseStaticFiles静态文件中间件优先级高于UseSpa，当请求./dist/[name].bundle.js时，静态文件中间件会直接匹配到本地磁盘wwwroot/dist目录下的历史打包文件返回，根本不会触发代理逻辑。

按以下步骤修正即可：

1. 调整Program.cs（或Startup.cs）的中间件顺序，为/dist路径单独配置转发规则，优先级高于静态文件中间件：

if (env.IsDevelopment())
{
    // 所有/dist开头的请求优先转发到webpack-dev-server
    app.MapWhen(context => context.Request.Path.StartsWithSegments("/dist"), appBuilder =>
    {
        appBuilder.Run(async context =>
        {
            var targetUrl = "http://localhost:8080" + context.Request.Path + context.Request.QueryString;
            using var client = new HttpClient();
            var res = await client.GetAsync(targetUrl);
            context.Response.ContentType = res.Content.Headers.ContentType?.ToString();
            await res.Content.CopyToAsync(context.Response.Body);
        });
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "./ClientApp";
        // 二选一即可，不要同时添加以下两句，否则会冲突
        // 需要ASP.NET自动启动dev server的话保留这句
        spa.UseReactDevelopmentServer(npmScript: "start");
        // 手动启动dev server的话只保留这句
        // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
    });
}

// 静态文件中间件放在代理配置之后
app.UseStaticFiles();

2. 修改webpack.config.js，配置输出路径和跨域许可：

module.exports = {
  // 其他原有配置保留
  output: {
    // 和你script标签的路径前缀保持一致
    publicPath: '/dist/'
  },
  devServer: {
    port: 8080,
    // 允许跨域访问内存中的打包文件
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    // 开启内存打包，不写入本地磁盘，避免和旧文件冲突
    writeToDisk: false
  }
}

配置完成后你原有./dist/[name].bundle.js的引用完全不需要修改，开发环境下所有dist路径的请求会自动转发到webpack-dev-server读取内存中的最新打包文件，生产环境会正常读取本地构建的静态文件。

方案二：webpack-dev-server反向代理ASP.NET服务（适合向全SPA过渡场景） #

如果后续计划转全SPA，可以直接把dev server作为开发入口，把非静态资源请求转发到ASP.NET服务：
修改webpack.config.js的devServer配置：

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      // 所有非/dist开头的请求全部转发到ASP.NET服务
      '!/dist/**': {
        // 注意如果你的ASP.NET用的是https，这里协议要写https
        target: 'https://localhost:44321',
        secure: false, // 忽略自签名开发证书错误
        changeOrigin: true
      }
    }
  }
}

开发时直接访问http://localhost:8080即可，页面由dev server转发请求从ASP.NET获取Razor内容，静态资源直接从dev server内存读取，不需要修改script标签。

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