CSS not being rendered correrctly and dashboard is blank

[vanniktech]

Using Spring Boot 2.1.9.RELEASE & Spring Boot Admin 2.1.6 with this is my configuration file:

spring.profiles.active=test

server.servlet.context-path=/spring-admin
server.address=127.0.0.1
server.port=20199

# Spring Admin.
spring.security.user.name=test
spring.security.user.password=test
spring.boot.admin.client.instance.metadata.user.name=test
spring.boot.admin.client.instance.metadata.user.password=test

management.endpoints.web.base-path=/manage

server.use-forward-headers=true

and the following NGINX configuration:

  location /spring-admin {
    proxy_pass http://localhost:20199/spring-admin;
    proxy_set_header   X-Forwarded-Proto $scheme;
  }

yields:

I can login but then I'm not seeing anything.

Also, with the login page the Chrome console is spitting out these errors:

I've already tried a few combinations of setting spring.boot.admin.context-path as well as spring.boot.admin.ui.public-url but in no case I'm able to get it to work. Documentation is widely spread and some of the issues here contain dead links.

What am I missing?

[joshiste]

Could you please upgrade to Spring Boot >= 2.2.x and Spring Boot Admin 2.2.x?

[vanniktech]

Updated to spring-boot-gradle-plugin:2.2.8.RELEASE & spring-boot-admin-dependencies:2.2.3 and I'm still getting errors and the CSS seems to be broken:

It looks like I need to specify the public url (since it shows localhost), which parameter can I use for that?

[joshiste]

with spring boot 2.2.x it is server.forward-headers-strategy=native

[vanniktech]

Still getting the same errors. Is there anything else that I can try?

[joshiste]

does your nginx set the X-Forwarded-Host header?

[vanniktech]

It didn't. Then I did:

  location /spring-admin {
    proxy_pass http://localhost:20199/spring-admin;
    proxy_set_header   X-Forwarded-Host $host;
    proxy_set_header   X-Forwarded-Proto $scheme;
  }

Now we're getting closer. Still no proper CSS layout but in the console some paths are being mixed up now:

The extra domain seems suspicious here: https://api-dev.becoach.app/spring-adminapi-dev.becoach.app/assets/css/chunk-common.0a38869e.css

When I'm removing it: https://api-dev.becoach.app/spring-admin/assets/css/chunk-common.0a38869e.css I'm getting Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR though.

[joshiste]

can you provide a complete project to reproduce the issue?

[daniel-scheibe-hagebau]

Take a look at your Security Configuration, since I made the initial setup there was some changes.

You can find the documentation here:

https://codecentric.github.io/spring-boot-admin/current/#_securing_spring_boot_admin_server

[vanniktech]

@joshiste yep - https://github.com/vanniktech/spring-boot-admin-project ./gradlew assemble to build the jar and then you can java -jar build/libs/becoach-service-admin.jar to start the server. http://localhost:20199/spring-admin/login is the url which will work fine on my local machine. CSS rendering gets weird when running this behind NGINX. This is a stripped down NGINX configuration file that we're using:

server {
  listen 80;
  server_name api-dev.becoach.app;
  
  location / { return 301 https://$server_name$request_uri; }
}

server {
  listen *:443;
  server_name api-dev.becoach.app;
  server_tokens off;
  ssl_certificate /etc/letsencrypt/live/api-dev.becoach.app/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/api-dev.becoach.app/privkey.pem;
  access_log  /var/log/becoach-test-access.log;
  error_log   /var/log/becoach-test-error.log;
  proxy_set_header Host      $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_connect_timeout 7d;
  proxy_send_timeout 7d;
  proxy_read_timeout 7d;
  
  location /spring-admin {
    proxy_pass http://localhost:20199/spring-admin;
    proxy_set_header   X-Forwarded-Host $host; 
    proxy_set_header   X-Forwarded-Proto $scheme;
  }
}

@daniel-scheibe-hagebau thanks for the hint. Didn't change anything though in regards to the CSS rendering though.

[daniel-scheibe-hagebau]

Then take a look at the spring configuration

I was configured it at the path

location /spring-admin {
proxy_pass http://localhost:20199/spring-admin;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
}

But spring boot is not producing the right url for the assets.

"https://api-dev.becoach.app/spring-adminapi-dev.becoach.app/assets/css/chunk-common.0a38869e.css"

If you add the right context path to the url you are able to load the missing assets.

( curl https://api-dev.becoach.app/spring-admin/assets/css/chunk-common.0a38869e.css )
At the time of the project take-over, you had removed all context paths from the Spring Boot configuration to simplify the configuration. This made all services inoperable. Maybe you forgot to reconfigure the context path there or you have to change the ui path correctly.

In my new bootstrapped spring boot admin (and config) service I dont use an own sudomain for this service and dont have to use an ui and context path configuration. This is maybe another solution to solve your problem.

[joshiste]

@vanniktech sorry for coming back to you so late.
I've tested it on my machine using your gradle project and with an nginx container using the config below - it all worked for me.

http {
server {
  listen *:80;
 root /usr/share/nginx/html;

  server_name api-dev.becoach.app;
  server_tokens off;
  proxy_set_header Host      $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_connect_timeout 7d;
  proxy_send_timeout 7d;
  proxy_read_timeout 7d;
   
  location /spring-admin {
    proxy_pass http://host.docker.internal:20199/spring-admin;
    proxy_set_header   X-Forwarded-Host $host; 
    proxy_set_header   X-Forwarded-Proto $scheme;
  }
}
}

events {}

[joshiste]

If it still doesn't work for your it may be due to the https config (I removed while testing - to spare me the time for generating the certificates and stuff).
If you provide a complete setup which I can easily run (e.g. using docker-compose) I may have a look at it.

[aeasylife]

After trying to switch the host of resource access，I solve this problem through nginx configuration
I configured the value of x-forwarded-host directly
location /adminApp/ { proxy_pass http://192.168.1.13:8881/adminApp/; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Host xxx.xxx.com; }