React+TypeScript+ASP.NET Core+WebView2桌面应用发布后API交互失败

1. API 基础 URL 硬编码问题 #

开发模式下你大概率用了http://localhost:5000作为API请求的固定地址，但发布后ASP.NET Core服务的运行端口、地址可能变化，且WebView2加载的是本地静态文件，此时硬编码的localhost地址会找不到服务。

• 解决：把React里的API请求改成相对路径，比如/api/your-endpoint，而非硬编码完整地址。这样请求会自动适配当前WebView2加载的服务根路径。

2. 发布时API服务未正确打包或启动 #

发布EXE时，可能ASP.NET Core的API服务没和React静态资源一起打包，或者启动EXE时API服务没正常跑起来。

• 解决：
  • 检查发布命令：用dotnet publish --self-contained true确保生成独立可执行文件，包含所有依赖。
  • 命令行启动EXE，查看控制台输出，确认API服务是否成功启动，有没有端口占用、启动报错等信息。

3. CORS 策略限制 #

开发时你可能只配置了允许http://localhost:5000的CORS规则，但发布后WebView2加载的是file://协议的本地静态文件，跨域请求会被拦截。

• 解决：
  • 在ASP.NET Core的Program.cs里修改CORS配置，允许file://协议的请求：

    builder.Services.AddCors(options =>
    {
        options.AddPolicy("AllowLocalFile", policy =>
        {
            policy.WithOrigins("http://localhost:5000", "file://")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
    });
    app.UseCors("AllowLocalFile");
    

  • 更稳妥的方式是用反向代理：让React的请求通过ASP.NET Core转发，彻底避开CORS问题。

4. 静态资源映射错误 #

发布后React构建的静态文件没被ASP.NET Core正确托管，导致WebView2加载的页面请求路径错误，或者根本找不到API入口。

• 解决：
  • 确认项目文件里配置了React构建产物复制到wwwroot：

    <Target Name="PostBuild" AfterTargets="PostBuildEvent">
        <Exec Command="npm run build --prefix ClientApp" />
        <Copy SourceFiles="ClientApp/build/**/*" DestinationFolder="wwwroot" />
    </Target>
    

  • 确保ASP.NET Core启用了静态文件中间件：

    app.UseStaticFiles();
    

5. WebView2 加载模式不匹配 #

开发时是Chrome直接访问localhost，发布后WebView2如果加载的是本地静态文件，请求上下文不同会导致API交互失败。

• 解决：
  • 配置WebView2直接加载ASP.NET Core服务的地址，比如http://localhost:5000，而非本地静态文件。这样React和API同域，不会有跨域和路径问题。
  • 在WebView2初始化代码里设置导航地址：

    webView2.CoreWebView2.Navigate("http://localhost:5000");
    

  • 同时在appsettings.json里固定服务端口：

    "Urls": "http://localhost:5000"
    

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