React + .NET应用部署Azure后无法直接访问特定页面的配置方法

问题原因 #

React属于单页应用（SPA），页面路由由客户端的React Router处理。当直接访问https://url/some-page这类子路由时，Azure上的.NET服务器会尝试寻找对应的物理文件，找不到就返回404，没有将请求转发给index.html让React Router接管路由逻辑。删除默认的WeatherForecastController和这个问题无关，不用在意。

解决方案 #

修改.NET后端的program.cs，添加路由 fallback 配置，让所有非API的请求都指向index.html，具体操作如下：

将你的program.cs代码修改为：

app.UseDefaultFiles();
app.UseStaticFiles();            

if (env.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseRouting();
app.UseCors(CorsHelper.AllowAnyCorsPolicyName);

app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    // 添加这一行，让所有非API请求 fallback 到index.html
    endpoints.MapFallbackToFile("index.html");
});

补充说明 #

• 这个配置会让服务器在找不到对应静态文件或API路由时，返回index.html，由React Router处理客户端路由逻辑。
• 确保发布到Azure时，React项目的build产物（通常是dist文件夹）已正确部署到App Service的wwwroot目录下（Visual Studio的默认发布流程会自动完成这一步）。

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