如何为ASP.NET React JS应用的默认Identity页面设置样式？

问题根源 #

当通过SPA代理端口（你看到的44000左右端口）访问时，默认代理规则会将绝大多数请求转发到React开发服务器。而React的客户端路由会捕获所有未匹配的路径，返回index.html内容——你的CSS请求被误当成了路由路径，因此返回的是React入口文件，而非wwwroot下的静态CSS文件。手动访问ASP.NET Core的7000端口时，请求直接由ASP.NET Core处理，所以能拿到正确的CSS内容。

解决方案 #

1. 调整SPA代理规则（修改setupProxy.js） #

修改代理配置，让静态资源请求直接由ASP.NET Core处理，不转发到React服务器：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    createProxyMiddleware({
      target: 'https://localhost:7000', // 替换为你的ASP.NET Core端口
      changeOrigin: true,
      secure: false,
      // 排除静态资源路径，避免被代理到React
      pathFilter: (path) => {
        return !path.startsWith('/css/') && 
               !path.startsWith('/js/') && 
               !path.startsWith('/images/') && 
               !path.startsWith('/lib/');
      }
    })
  );
};

2. 确认ASP.NET Core静态文件中间件顺序 #

在Program.cs中，确保app.UseStaticFiles()在路由和授权中间件之前执行，保证静态资源能被正确处理：

var app = builder.Build();

// ...其他中间件配置
app.UseHttpsRedirection();
app.UseStaticFiles(); // 此中间件需在UseRouting之前

if (!app.Environment.IsDevelopment()) {
    app.UseSpaStaticFiles();
}

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
// ...后续路由映射

3. 正确引用CSS文件 #

在Register.cshtml中使用ASP.NET Core路径解析语法，并添加版本戳避免缓存问题：

<link rel="stylesheet" type="text/css" href="~/css/Register.css" asp-append-version="true" />

4. 重启服务验证 #

修改配置后，重启ASP.NET Core应用和React开发服务器，再次访问SPA代理端口的注册页面，检查开发者工具中的CSS文件内容，此时应该能加载到正确的CSS代码。

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