Gatsby's JS files not loading because of content-type mismatch on iOS

Support
1

I’m deploying a Gatsby site (https://2020.stateofjs.com/, password: foobar) to Netlify. I’ve suddenly started running into this issue but only on iOS (Safari desktop works):

Refused to execute https://2020.stateofjs.com/component---src-core-pages-page-template-js-1562a37b733a02cbbf80.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.

On the other hand The State of CSS 2020, which has a very similar stack, work fine without this issue. Any idea what’s going on?

2

Weird, it seems to work again now. Maybe it was a temporary Netlify issue?

3

Hey @SachaG,
We’ve seen an issue where Safari will cache the 401 responses for pages with password protection :frowning:

Sounds like you’re running into this on mobile only, not desktop, but for folks browsing on desktop we suggest trying to open the page in a private browsing window in Safari. There is a link about how this is done here:

If that doesn’t resolve the issue and/or if there are other questions, please let us know.

5

It could be that because I still get the issue in iOS Safari but not iOS Chrome, which uses the same rendering engine as far as I know. So probably a cache thing.

6

having the same problem with Safari but on deskop & mobile. Same built project works without problems when doing “gatsby build && gatsby serve” on localhost. So this is definitely a server issue.

Get tons of these console logs:
[Error] Refused to execute https://asdasdasd.com/af4000f3fe1cfbe71df4b32de1ebbaf80ef1d2a0-ae6fa0465ddaf1a51ad6.js as script because “X-Content-Type-Options: nosniff” was given and its Content-Type is not a script MIME type.

Of course this netlify site is password protected (still in stealth mode) which is most likely the key issue here.

But still dont know how to fix it…

7

ok, got it. The fix gatsby can be done via Netlify Plugin:

{
    resolve: `gatsby-plugin-netlify`,
    options: {
      mergeLinkHeaders: false,
      mergeCachingHeaders: false
    },
},

But to be honest… it seems like this shouldnt be a problem in the first place from a server perspective. Why does the server responds with wrong MIME types for JS requests after the user authenticated via Basic-Auth and can successfully download the HTML part of the homepage.

After fixing, dont forget to clean browser cache. Perhaps the issue is that netlify sends back the netlify login html page instead of the JS content, which would explain this mime type mismatch.

8

Hi, @logemann. This issue is also discussed here:

and here:

There are solutions mentioned in both topics as well. Would you please take a look at those topics above and let us know if there are other questions?

9

Ok. Thanks for pointing out additional infos on that. Especially:

Safari does not include cookies when requesting es2015 module files