Why js,css,lib didn't load from wwwroot?

Dondon510 221 Reputation points
2022-04-05T14:25:27.84+00:00

I made a simple ASP MVC (Net Core 3.1) , I leave it as standard, and deploy it under a subfolder of the Apache (/var/www/html/myapps/app/v1)

I started the kestrel without any errors, I access the page (ie. https://example.com/myapps/app/v1), it shows but some css, js, lib don't load properly (ERR_ABORTED 404 (Not Found), I see they are already in the www-root folder

this is weird for me, and stuck on this for almost 2 weeks, I need help.

thank s a lot in advance

Don

Failed to load resource: the server responded with a status of 404 (Not Found)

bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.bundle.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
site.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
site.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

and as default, all of the file references (.css, js, etc already been in the /wwwroot) and I already referenced them in _layout.cshtml

below my configs:

[root@iZk1aa2qin3uxnqh8agvrmZ ~]# httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built: Nov 16 2020 16:18:20
[root@iZk1aa2qin3uxnqh8agvrmZ ~]#

my kestrel

[Service]
WorkingDirectory=/var/www/html/prime/test/v1
ExecStart=/usr/bin/dotnet /var/www/html/prime/test/v1/WebApplication4.dll
Restart=always
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=dotnet-example
User=root
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
TimeoutStopSec=90

.my httpd.conf

<VirtualHost *:443>

ServerName apps.example.com
ServerAlias apps.example.com
ServerAdmin info@example.com

DocumentRoot /var/www/html

<Directory /var/www/html>
    Options -Indexes +FollowSymLinks
    AllowOverride All
</Directory>

<Location /myapps/test/v1/>
  ProxyPreserveHost On
  ProxyPass http://localhost:5003/
  ProxyPassReverse http://localhost:5003/
  Require all granted
</Location>

and last but not least, my startup.cs

 public class Startup
 { 
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UsePathBase("/myapps/test/v1");

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,242 questions
0 comments No comments
{count} votes

13 answers

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,046 Reputation points Microsoft Vendor
    2022-04-06T06:42:18.04+00:00

    Hi @Dondon510 ,

         app.UseStaticFiles();    
    
           app.UsePathBase("/myapps/test/v1");  
    

    The issue relates the above code, since you want to add the specified path ("/myapps/test/v1") to the request path, you should also set the path for the static file using the StaticFileOptions. Try to use the following code:

            app.UseStaticFiles(new StaticFileOptions  
            {   
                RequestPath = "/myapps/test/v1"  
            });  
            app.UsePathBase("/myapps/test/v1");  
    

    The result like this:

    190442-image.png

    Besides, there have another way to achieve the same result, you can also add the specified path ("/myapps/test/v1") via the route template, instead of using the UsePathBase middleware.

    190369-image.png


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.
    0 comments No comments

  2. Bruce (SqlWork.com) 57,966 Reputation points
    2022-04-05T18:27:06.107+00:00

    you wwwroot is accessed as:

    https://example.com/myapps/app/v1/

    or

    /myapps/app/v1/

    if you use the browser debugger, then you will probably see you are using "/". the easiest fix is to set a <base> in the layouts <head> section, add:

    <base href="/myapps/app/v1/">

    0 comments No comments

  3. Dondon510 221 Reputation points
    2022-04-06T07:01:00.473+00:00

    190434-untitled.png

    0 comments No comments

  4. Dondon510 221 Reputation points
    2022-04-06T10:40:57.343+00:00

    @ZoeHui-MSFT

    it works if I use the 1st suggestion and run it locally!

    app.UseStaticFiles();  
    app.UsePathBase("/myapps/test/v1");  
     app.UseStaticFiles(new StaticFileOptions  
     {   
         RequestPath = "/myapps/test/v1"  
     });  
     app.UsePathBase("/myapps/test/v1");  
    

    but it doesn't work if it ran on CentOS 7 Apache (configs above)
    190562-untitled.png

    0 comments No comments

  5. Bruce (SqlWork.com) 57,966 Reputation points
    2022-04-06T16:21:34.067+00:00

    apache is a reverse proxy to your asp.net core app. it is mapping the input urls to the asp.net core urls. show your apache config file proxy settings.

    some understanding:

    app.UsePathBase("/myapps/test/v1");  
      
    

    is middleware that will strip a leading "/myapps/test/v1" from the request urls.

    app.UseStaticFiles(new StaticFileOptions  
    {   
          RequestPath = "/myapps/test/v1"  
    });  
    

    configures the static file handler to map requests starting with "/myapps/test/v1" to static files. if you register the middleware before the static handler you should not need this.

    this means apache will try to serve the file directly, not the proxied app (uses you mapped all request to the proxied app). this is because UrlHelper uses route data to determine, and the route data does not have the route prefix, you are probably having apache map

    /myapps/test/v1 to http://localhost:<port>

    instead of

    /myapps/test/v1 to http://localhost:<port>/myapps/test/v1

    also as I suggested, you can set the <base> in the layout, and the browser will handle adding the base prefix.

    0 comments No comments