You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

在ASP.NET Core 2中静态托管CRA构建文件夹遇问题求助

解决ASP.NET Core托管React Build文件夹的404问题

看起来你遇到的问题主要出在静态资源路径配置和SPA路由回退的处理上,我帮你拆解一下并给出修复方案:

你的配置里的核心问题

  1. RequestPath设置错误:你把RequestPath设为"/static",这意味着只有访问/static开头的路径才会从client/build文件夹取文件,但React的index.html是在build的根目录,当你访问网站根路径(/)时,服务器找不到对应的资源,直接返回404。
  2. 缺少SPA路由回退处理:React是单页应用,当用户直接访问React路由(比如/about),ASP.NET Core会尝试寻找对应的控制器/路由,找不到就返回404,需要把这类请求转发到index.html让React自己处理。

修复后的完整配置

首先确保你已经安装了Microsoft.AspNetCore.SpaServices.Extensions NuGet包(.NET Core 3.0+默认包含,老版本需要手动安装),然后修改你的Configure方法:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsProduction())
    {
        // 映射React build文件夹到网站根路径
        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(Directory.GetCurrentDirectory(), "client/build")),
            RequestPath = "" // 空字符串表示根路径,让index.html能被访问到
        });

        // 处理SPA路由回退:所有非API、非静态文件的请求都返回index.html
        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "client/build";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(Directory.GetCurrentDirectory(), "client/build"))
            };
        });
    }

    // 配置API路由,建议加上/api前缀避免和SPA路由冲突
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "api/{controller=Home}/{action=Index}/{id?}");
    });
}

额外需要检查的点

  • 确认build文件夹路径正确:确保Path.Combine(Directory.GetCurrentDirectory(), "client/build")确实指向你的React项目build后的文件夹,比如如果你的React项目在解决方案的子目录里,路径可能需要调整。
  • 确保build文件被发布到服务器:在你的ASP.NET Core项目的.csproj文件里添加以下配置,这样发布项目时client/build里的文件会被复制到输出目录:
    <ItemGroup>
      <Content Include="client/build/**/*">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </Content>
    </ItemGroup>
    

这样调整后,生产环境下访问网站根路径就能加载React的index.html,同时直接访问React路由也不会出现404了。

内容的提问来源于stack exchange,提问作者Chaim Friedman

火山引擎 最新活动