[SOLVED] When I remove the port from the URL, photos, styles and scripts are not loaded

Issue

I have a Spring MVC project, I collected it in a docker container

docker pull dockerHubAcc/project-admin:latest
docker run -d --name project-admin-container -p 8088:443 --network someNetwork -v someVolume:/var/photos dockerHubAcc/project-admin

I wrote in the application.yaml file

server:
  servlet:
    context-path: /project

why if I enter the following address path: http://ssh.host:8088/project/admin/view then everything works correctly and all styles and scripts from the src/main/resources/static folder and files from volume are loaded.

But when I enter the following address path: https://ssh.host:/project/admin/view (removed port) I encounter an issue where some styles are not loading, while others load successfully. This is despite the fact that all styles are stored in the src/main/resources/static directory. For example:

<script src="/project/adminlte/plugins/jquery/jquery.min.js"></script>
<script src="/project/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/project/adminlte/dist/js/adminlte.js?v=3.2.0"></script>
<script src="/project/adminlte/dist/js/demo.js"></script>
<script src="/project/script.js"></script>

In this block, all scripts load except for this one:

<script src="/project/script.js"></script>

In the configuration class, I added:

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
        registry
                .addResourceHandler("/uploads/**")
                .addResourceLocations("file:/var/photos/");
    }

Also, when I retrieve files from the volume, for example: When I use src="/uploads/house/k1mmljpoct78hawq.jpg" and specify the port in the URL, everything works, and the photo loads. However, when I remove the port, the files do not load.

before: enter image description here after: enter image description here

I tried changing the port to 80 and it didn't help. I don't know how important this information is, but I noticed that in the src/main/resources/static folder, files are uploaded only from the adminlte subfolder, and data is not uploaded from other subfolders, and this is quite strange. enter image description here

Solution

You should use a webserver like Nginx to forward your requests to your applications.

You can forward your requests to applications on Nginx with reverse proxy configuration. for instance:

server {
  server_name example.com;
  location / {
  proxy_set_header Upgrade            $http_upgrade;
  proxy_set_header Connection         "upgrade";
  proxy_set_header Host               $host;
  proxy_set_header X-Real-IP          $remote_addr;
  proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto  $scheme;
  proxy_set_header X-Forwarded-Host   $host;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-Port   $server_port;
  client_max_body_size 10M;

  proxy_pass http://127.0.0.1:8088;
  }

 location /user/ {
  proxy_pass http://127.0.0.1:8881;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  } 

  location /trade/ {
  proxy_pass http://127.0.0.1:8882;
  }

}

Also, you can find Other examples of nginx reverse proxy here.

this config should be on /etc/nginx/sites-enabled/example.conf or /etc/nginx/conf.d/example.conf

Answered By - Adel Babzadeh

Answer Checked By - Gilberto Lyons (WPSolving Admin)