将React应用迁移至Vite并部署在ASP.NET Core中遇代理问题

核心问题：误用CRA专属代理方法 #

UseReactDevelopmentServer是ASP.NET Core专门为**Create React App（CRA）**设计的扩展方法，它的逻辑是：调用CRA的start脚本后，自动检测CRA随机生成的开发服务器端口，再把ASP.NET请求代理到该端口。

但你的Vite项目是手动指定固定端口3000启动的，这个方法却依然按CRA逻辑去尝试连接随机端口（比如报错里的57034），而Vite根本没在这个端口运行，自然会出现连接被拒绝的错误。

随机端口的来源 #

这个随机端口是UseReactDevelopmentServer方法模拟CRA的端口生成逻辑自动生成的——因为CRA的react-scripts start默认随机端口启动，该方法为适配CRA才做了这个逻辑，并非Vite或ASP.NET Core本身的默认行为。

正确的Vite适配配置 #

移除UseReactDevelopmentServer调用，改用通用SPA代理方法指向Vite的固定开发服务器端口：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "vite/fact-find";

    if (app.Environment.IsDevelopment())
    {
        // 直接代理到Vite开发服务器地址
        spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    }
    else
    {
        // 生产环境指定Vite构建后的静态文件目录
        app.UseSpaStaticFiles(new SpaStaticFilesOptions
        {
            RootPath = Path.Combine(spa.Options.SourcePath, "dist")
        });
    }
});

对应的Vite启动脚本保持不变即可：

"start": "echo Starting the development server && vite --host localhost --port 3000"

额外注意事项 #

• 启动项目前先确认Vite确实在3000端口运行，可直接访问http://localhost:3000验证
• 若遇跨域问题，可在Vite的vite.config.js中配置server.proxy，或确保ASP.NET代理地址与Vite的host设置一致
• 生产环境需先执行Vite的build脚本，将产物输出到dist目录，确保ASP.NET能正确读取静态文件

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