Spring-boot-admin: custom view js/css are not loaded because of wrong mime-type

Created on 6 Jan 2020 · 14Comments · Source: codecentric/spring-boot-admin

spring-boot: 2.2.2.RELEASE
spring-boot-admin: 2.2.0-SNAPSHOT

I try to add my own custom-view ("cc")
I followed https://github.com/codecentric/spring-boot-admin/tree/master/spring-boot-admin-samples/spring-boot-admin-sample-custom-ui

Loading seems to work
2020-01-06 14:37:02.072 INFO 6588 --- [ main] b.a.s.u.c.AdminServerUiAutoConfiguration : Loaded Spring Boot Admin UI Extension: UiExtension(resourcePath=cc/js/cc.ca1ba42b.js, resourceLocation=file:target/vue-dist/cc/js/cc.ca1ba42b.js)
2020-01-06 14:37:02.073 INFO 6588 --- [ main] b.a.s.u.c.AdminServerUiAutoConfiguration : Loaded Spring Boot Admin UI Extension: UiExtension(resourcePath=cc/css/cc.4992ea56.css, resourceLocation=file:target/vue-dist/cc/css/cc.4992ea56.css)

But then the real ui is not showing the new views

I see only 2 errors in chrome

Refused to apply style from 'http://localhost:8080/cc/css/cc.4992ea56.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
details:1 Refused to execute script from 'http://localhost:8080/cc/js/cc.ca1ba42b.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
A bad HTTP response code (404) was received when fetching the script.

bug server

Source

ahoehma

👍4

All 14 comments

I found an ugly workaround :)
I defined the target-directory for the vue-compiling like that:
const targetDir = 'target/vue-dist/assets/cc/';
And now sba picks up the extension "cc" correctly.

ahoehma on 6 Jan 2020

can you provide a project to reproduce this issue?

joshiste on 7 Jan 2020

Same problem here.

@ahoehma can you be more precise about your workaround?

marbon87 on 13 Jan 2020

closed to missing feedback

joshiste on 20 Jan 2020

@joshiste i created a sample project based on spring boot and your spring-boot-admin-sample-custom-ui.
It does not show exactly the same error, but the custom ui is not shown and i get the following log in the browser console:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/custom/css/custom.41bd3967.css".

If you switch back to spring boot version to 2.1.12.RELEASE and spring boot admin version to 2.1.5 the custom entry is show on the applications view.

custom-ui.tar.gz

marbon87 on 31 Jan 2020

Hi @joshiste , do you need any more feedback? Because the issue is still tagged with 'watiing-for-feedback`

marbon87 on 14 Feb 2020

currently not, but I didn't found the time to look at it.

joshiste on 14 Feb 2020

I have the same problem. One additional important information that's not in the original description is that I use standard Tomcat war deployment, not embedded standalone process. Maybe it's important. I'm trying to find where in the code of admin are the mime types set up but I can't find anything (except for notifications), which is puzzling. How can standard admin javascript have correct mime type and custom javascripts not when they have the same file extension??

calaveraInfo on 27 Feb 2020

Oh, now I noticed that those JS and CSS are not served on their URLs at all. Only a blank page with standard menu header sits on their URLs, so the mime type is actually correct with respect to such content. The problem is more profound than just mime types.

calaveraInfo on 27 Feb 2020

Have the same issue. Not sure if its related to Accept header.
If I curl/httpie with specific Accept header it works...

❯ http http://localhost:8080/jobs/css/jobs.6b0eee5d.css
HTTP/1.1 200 OK
Content-Language: en-US
Content-Type: text/html
content-length: 1542

<!DOCTYPE html><html><head><base href=http://localhost:8080/ ><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=format-detection content="telephone=no,email=no"><meta name=theme-color content=#42d3a5><link rel=preload href=togglz/css/togglz.f43d45e5.css as=style><link rel=preload href=jobs/css/jobs.6b0eee5d.css as=style><link rel=preload href=togglz/js/togglz.cd15b40a.js as=script><link rel=preload href=jobs/js/jobs.e4b8c782.js as=script><link href=togglz/css/togglz.f43d45e5.css rel=stylesheet><link href=jobs/css/jobs.6b0eee5d.css rel=stylesheet><link rel="shortcut icon" href=assets/img/favicon.png type=image/png><title>Spring Boot Admin</title><link href=assets/css/chunk-common.2cd84e18.css rel=preload as=style><link href=assets/css/sba-core.80e2ff1d.css rel=preload as=style><link href=assets/js/chunk-common.6a3886a1.js rel=preload as=script><link href=assets/js/chunk-vendors.2beb5fac.js rel=preload as=script><link href=assets/js/sba-core.fc88cc06.js rel=preload as=script><link href=assets/css/chunk-common.2cd84e18.css rel=stylesheet><link href=assets/css/sba-core.80e2ff1d.css rel=stylesheet></head><body><div id=app></div><script lang=javascript src=sba-settings.js></script><script lang=javascript src=togglz/js/togglz.cd15b40a.js></script><script lang=javascript src=jobs/js/jobs.e4b8c782.js></script><script src=assets/js/chunk-vendors.2beb5fac.js></script><script src=assets/js/chunk-common.6a3886a1.js></script><script src=assets/js/sba-core.fc88cc06.js></script></body></html>

❯ http http://localhost:8080/jobs/css/jobs.6b0eee5d.css Accept:text/stylesheet
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=3600
Content-Length: 753
Content-Type: text/css
Last-Modified: Fri, 27 Mar 2020 19:45:05 GMT

@import url(https://use.fontawesome.com/releases/v5.8.1/css/all.css);iframe[data-v-422f0e8a]{min-width:100%;width:100%}.title[data-v-422f0e8a]{margin:.75rem 0}td[data-v-422f0e8a]{padding:.5em .75em;position:relative;width:1%}td[data-v-422f0e8a]:last-child{width:100%}.link[data-v-422f0e8a]{cursor:pointer}.link[data-v-422f0e8a]:hover{color:#2bb78b}iframe[data-v-2e6aae8b]{min-width:100%;width:100%}.title[data-v-2e6aae8b]{margin:.75rem 0}td[data-v-2e6aae8b]{padding:.5em .75em;position:relative;width:1%}td[data-v-2e6aae8b]:last-child{width:100%}.link[data-v-2e6aae8b]{cursor:pointer}.link[data-v-2e6aae8b]:hover{color:#2bb78b}.jobExecutions[data-v-2409e528],.jobs[data-v-9f1272f4],iframe[data-v-9f1272f4],iframe[data-v-2409e528]{width:100%;height:100%}

BeneStem on 27 Mar 2020

👍1

The browser console errors link to this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
I believe this has been caused by Spring Security enabling default security headers [1] with the version pulled in by Spring Boot 2.2.
[1] https://docs.spring.io/spring-security/site/docs/5.1.0.RELEASE/reference/htmlsingle/#default-security-headers

Need to get the request to send the correct headers...

mbwhelan on 28 Apr 2020

I found an ugly workaround :)
I defined the target-directory for the vue-compiling like that:
const targetDir = 'target/vue-dist/assets/cc/';
And now sba picks up the extension "cc" correctly.

I expanded your workaround into a #1410 :)

bratwurzt on 30 Apr 2020

👍1

there shoud be soon a 2.2.3-SNAPSHOT available with this fix and I'll also try to push out a new release in the next days.

joshiste on 1 May 2020

I found an ugly workaround :)
I defined the target-directory for the vue-compiling like that:
const targetDir = 'target/vue-dist/assets/cc/';
And now sba picks up the extension "cc" correctly.
hi,can you tell me how to do it?