Skip to content

CSS and JS files not being served correctly

If you take a look on how js and css files are being served, you'll note that they seem to have an HTML tag added on top:

$ curl -s https://review-develop-3zknud.matweb.info/js/vendor.9ea897c0.js | head -n1
<!DOCTYPE html><html><head><base href=/ ><title>MAT2</title><meta charset=utf-8><meta name=description content="A Quasar frontend built for Mat2-Web"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=yes,initial-scale=1,minimum-scale=1,maximum-scale=5,width=device-width"><link rel=icon type=image/png href=statics/icons/icon-128x128.png><link rel=icon type=image/png sizes=16x16 href=statics/icons/favicon-16x16.png><link rel=icon type=image/png sizes=32x32 href=statics/icons/favicon-32x32.png><link rel=icon type=image/png sizes=96x96 href=statics/icons/favicon-96x96.png><link rel=icon type=image/ico href=statics/icons/favicon.ico><link href=/css/0a344382.086e11b0.css rel=prefetch><link href=/css/18980655.d8c128bb.css rel=prefetch><link href=/css/1e41dcb2.5b68699e.css rel=prefetch><link href=/css/44f0d14c.663e410f.css rel=prefetch><link href=/css/ef64a646.33925130.css rel=prefetch><link href=/js/0a344382.23de675f.js rel=prefetch><link href=/js/18980655.9c9a6389.js rel=prefetch><link href=/js/1e41dcb2.111d0714.js rel=prefetch><link href=/js/44f0d14c.c2304d61.js rel=prefetch><link href=/js/5b8f4b09.1a89b482.js rel=prefetch><link href=/js/ef64a646.6239b5e2.js rel=prefetch><link href=/css/app.4e033e82.css rel=preload as=style><link href=/js/app.ba4d97a5.js rel=preload as=script><link href=/js/vendor.a952eb91.js rel=preload as=script><link href=/css/app.4e033e82.css rel=stylesheet><link rel=manifest href=manifest.json><meta name=theme-color content=#027be3><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=default><meta name=apple-mobile-web-app-title content=MAT2><link rel=apple-touch-icon href=statics/icons/apple-icon-120x120.png><link rel=apple-touch-icon sizes=180x180 href=statics/icons/apple-icon-180x180.png><link rel=apple-touch-icon sizes=152x152 href=statics/icons/apple-icon-152x152.png><link rel=apple-touch-icon sizes=167x167 href=statics/icons/apple-icon-167x167.png><link rel=mask-icon href=statics/icons/safari-pinned-tab.svg color=#027be3><meta name=msapplication-TileImage content=statics/icons/ms-icon-144x144.png><meta name=msapplication-TileColor content=#000000></head><body><div id=q-app><style>html, body {

The browser also mentions wrong mimetypes:

The script from “https://review-develop-3zknud.matweb.info/js/vendor.9ea897c0.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

This could have several reasons:

  • ingress messes up files with an incorrect mimetype
  • mimetypes are messed up inside the container

Check to following to debug:

  1. Open a proxy to the container:
$ kubectl port-forward -n <gitlab-namespace> <podname> 8080:80
  1. Check if the same happens locally:
curl -s http://localhost:8080/js/vendor.9ea897c0.js|head -n1

If the output is the same as above, the error is inside the container and we should investigate in there. If not, we'll need to take a look at ingress.