Google App Engine serves static CSS files with wrong mime-type

3
votes

I've been working on a new site to be hosted on Google App Engine. I've been deploying my app to a development project and it is hosted here:

Development: https://herdboss-dev.appspot.com/

It works fine.

But when I take the exact same code and deploy it to my other project which going to be the real, production website, it is serving some of the css as application/octet-stream instead of text/css and so those files aren't being parsed by the browser, so almost all of my css is not working on the production site:

Production: https://herdboss-prod.appspot.com/

Even weirder is that SOME of the css is being served correctly. /css/normalize.css is being served as text/css but /css/site.css is being served as application/octet-stream.

https://herdboss-prod.appspot.com/css/normalize.css

https://herdboss-prod.appspot.com/css/site.css

https://herdboss-prod.appspot.com/js/jquery-ui-1.12.1.custom-theme/jquery-ui.min.css

My app.yaml has a static handler for css files:

- url: /css
  static_dir: css
  secure: always

I tried adding a mime_type as well but that didn't change anything:

- url: /css
  static_dir: css
  mime_type: 'text/css'
  secure: always

EDIT:

While experimenting, I cut my site.css in half, deployed, and then it started serving correctly. Then I reinstated the full size site.css, deployed... and it's still serving properly now.

But my jquery-ui.min.css is still serving as octet-stream. This is crazy.

EDIT2:

And it's serving my svg's with the wrong mime type as well.

Is mime-typing just utterly broken in the GAE? If so, why is it working on my dev gae?

2
google-app-enginemime-types
I have a dozen projects on GAE, some of them running for years. Never saw any problems with mime types of CSS or any other files. The problem is not on the GAE side. - Andrei Volgin
BTW, I opened your production site, and all CSS is served correctly. Hopefully, that means you solved the problem. - Andrei Volgin
I am just now getting hit with this on a GAE-Platform python project running for years (and no modifications on the css-files) and all stylesheets stopped working being served as octet-stream mime-type. Safari diagnoses: "non CSS MIME types are not allowed in strict mode." Chrome and FF stopped working too. Uhh. Oh this is bad! - cat
It seems to be a failure in a caching server (server: Google Frontend) the direct access to each version-URL works fine and has no issues. It serves the same file as text/css while the other site serve it as octet-stream, both return server: Google Frontend. I wish there would be some wipe cache function! - cat
This started happening to our project recently with a variation on the theme: Some static javascript files are being served with a text/plain mime type, and so are not executed by the browser. Luckily, this has only affected a qa project and not (yet?) the prod one. I think this requires urgent intervention by Google because it has a catastrophic potential. - ACEGL

2 Answers

0
votes

My solution was:

  1. duplicate the offending file and rename it
  2. change one byte (otherwise it will not be uploaded/updated)
  3. verify that it downloads as stylesheet
  4. use the renamed, changed css file in your html
  5. Wait for the original to get served correctly: after about 24h the problem fixed itself

There is an issue on the GAE issue tracker: https://issuetracker.google.com/issues/186012458

Initially, I tested a workaround but this workaround broke after a day: I modified my HTML to load the stylesheets from a version server basically cross-site as (hxxps://VERSION-dot-SERVER.appspot.com/static/stylesheet.css). The version server served the correct mime-type ... but only for some time.

I suspect the problem is a wrong mime-type due to an extremely rare race condition (cache access/refresh during upload?). It is simply not possible to trick the Google Frontend to refresh the file. Even appending .../styles.css?x=1 or switching back to an older code version will not trigger a refresh.

Files and their mime-types seem to be stored based on their hashed-values, so re-upload of a file with the same content has no effect even if it is simply renamed. You will see an "uploaded 0 files" message if you deploy a version with a duplicate file. It has to be changed and renamed.

-1
votes

I did check both of your sites: https://herdboss-prod.appspot.com/, https://herdboss-prod.appspot.com/

I can see that you have several CSS files: normalize.css, jquery-ui.min.css, base-min.css, grids-min.css, grids-responsive-custom.css, css?family=Open+Sans, site.css, ie-is-terrible.css, css_compiled.css.

All of them served correctly as Type: stylesheet

If you encounter this problem I recommend performing following test:

  1. Check content type in Developer Console > Network with the option Disable Cache > And reload page. If it helps: clean cache of the browser.
  2. Check content of the page in different browser, as content can be interpreted differently depending on the rendering engine.
  3. If 1 and 2 does not work, and you are using nginx, it is most probably configuration problem. Change the file /etc/nginx/conf.d/default.conf. Put /etc/nginx/mime.types in the 'http' section:
http / {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    ....
}

if it is still not working, move it to location section

location / {
 include       /etc/nginx/mime.types;
 ...
}