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

Question

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?}");
        });
    }

Answer 1

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:

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.

---

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

Answer 2

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/">

Answer 3

Answer 4

@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)

Answer 5

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.