Unable to load JavaScript file due to a MIME type mismatch

Question

I have a web page that is pulling in some external JS files. The script tags are very simple, just plain old

<script type="text/javascript" src="https://oursite.com/a-valid-file.js"></script>

After a recent server update, all of these files are failing to load with the following error:

The resource from “https://oursite.com/a-valid-file.js” was blocked due to MIME type (“application/unknown”) mismatch (X-Content-Type-Options: nosniff).

I have tried:

1. Pulling in the JS by appending it to the tag, and explicitly changing the type like so:

var jsfile = document.createElement("script");
jsfile.src = "https://oursite.com/a-valid-file.js";
jsfile.async = true;
jsfile.type = "application/javascript";  //have tried several here
var head = document.getElementsByTagName('head')[0];
head.appendChild(jsfile);

2. Changing the encoding of the JS file to UTF-8, ANSI, and other encodings (made no difference)

3. Trying different browsers (Edge, Chrome, and Firefox all give the same result)

I don't control the server - it's hosted and managed by another team. My questions are:

1. Why is this error occurring?

2. Can I fix this on my own by changing my file in some way?

3. If I have to ask the server team to make a configuration change, what change would I need to ask for?

Answer 1

The server from which you’re retrieving the script is responding with a Content-Type header value that doesn’t correspond with a JavaScript file. As such your browser will refuse to load it, as there’s no practical reason for your browser to try to execute something it doesn’t think is actually JavaScript.

Unless you can put a proxy in the middle that will take the response and modify this header before returning to the client, the onus is on the team managing the server to fix the headers they’re sending in their response.