.Net Core引入React后.cshtml页面JS被重定向到React应用如何解决

当前配置中的UseSpa中间件未做路径限制，会捕获所有未被前置中间件处理的请求，统一返回React应用的入口HTML文件。你只配置了.well-known路径的静态文件规则，未默认注册wwwroot目录下的静态资源处理逻辑，所以/js/xxx.js这类资源请求没有被静态文件中间件拦截，直接走到了SPA中间件，返回了HTML内容，才会抛出Uncaught SyntaxError: Unexpected token '<'报错。

1. 补充默认静态文件配置 #

在Configure方法的.well-known路径静态文件配置前，新增默认静态文件注册，优先处理wwwroot目录下的js、css、图片等公共资源：

// 新增这行，默认处理wwwroot目录下的静态资源
app.UseStaticFiles();

// 保留原有的.well-known路径静态文件配置
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @".well-known")),
    RequestPath = new PathString("/.well-known"),
    ServeUnknownFileTypes = true // serve extensionless
});

2. 给SPA中间件添加路径限制 #

将UseSpa包裹在路径判断逻辑中，仅当请求路径以/clientapp开头时才触发SPA逻辑，不要全局生效，修改后的代码如下：

// 替换原来的app.UseSpa代码块
app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/clientapp"), spaBuilder =>
{
    spaBuilder.UseSpa(spa => {
        spa.Options.SourcePath = "ClientApp";
        if (env.IsEnvironment("LocalDevelopment"))
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

3. 可选：调整React项目基础路径（避免后续资源路径冲突） #

如果React应用内部有资源引用或路由配置，需要做两处调整：

• 在React项目的package.json中新增配置："homepage": "/clientapp"
• 如果使用了react-router，给路由组件添加basename属性：<BrowserRouter basename="/clientapp">
  配置完成后React打包生成的资源路径会自动携带/clientapp前缀，和原有站点资源完全隔离。

• 普通.cshtml页面的/js/xxx.js等资源会被默认静态文件中间件直接返回，正常加载
• 仅访问/clientapp前缀的路径时才会加载React应用，两部分逻辑完全独立，互不干扰。

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