rob.m
rob.m

Reputation: 10571

Refused to execute script, strict MIME type checking is enabled?

Why am I getting this error in console?

Refused to execute script from 'https://www.googleapis.com/customsearch/v1?key=API_KEY&q=flower&searchType=image&fileType=jpg&imgSize=small&alt=json' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

Upvotes: 233

Views: 993308

Answers (30)

OutstandingBill
OutstandingBill

Reputation: 2834

I was seeing this in the console: Console tab from developer tools

... and this in the Network tab: Network tab from developer tools

I should've looked more closely at the "0B" clue.

It was actually file not found, because I hadn't built the .min.js version of the file (in my case, using Gulp).

Upvotes: 0

araujo.jpc
araujo.jpc

Reputation: 101

After searching for a while I realized that this error in my Windows 10 64 bits was related to JavaScript. In order to see this go to your browser DevTools and confirm that first. In my case it shows an error like "MIME type ('application/javascript') is not executable".

If that is the case I've found a solution. Here's the deal:

  1. Borrowing user "ilango100" on https://github.com/jupyterlab/jupyterlab/issues/6098:

I had the exact same issue a while ago. I think this issue is specific to Windows. It is due to the wrong MIME type being set in Windows registry for javascript files. I solved the issue by editing the Windows registry with correct content type:

regedit -> HKEY_LOCAL_MACHINE\Software\Classes -> You will see lot of folders for each file extension -> Just scroll down to ".js" registry and select it -> On the right, if the "Content Type" value is other than application/javascript, then this is causing the problem. Right click on Content Type and change the value to application/javascript

Try again in the browser."

After that I've realized that the error changes. It doesn't even open automatically in the browser anymore. PGAdmin, however, will be open on the side bar (close to the calendar/clock). By trying to open in the browser directly ("New PGAdmin 4 window...") it doesn't work either.

FINAL SOLUTION: click on "Copy server URL" and paste it on your browser. It worked for me!

EDIT: Copying server URL might not be necessary, as explained by Eric Mutta in the comment below.

Upvotes: 9

KarljoY973
KarljoY973

Reputation: 11

I had the same problem, In my case the solution was completely different. It seems that when you have the HtmlWebpackPlugin you should not set the src tag of your script element with the path of your js file but you should just specify the type tag.

Upvotes: 0

Leonard
Leonard

Reputation: 142

In my case, I was getting the same error when running:

 node server.js

but when I run:

 npm start

the error disappeared and everything worked as expected. Here is my project structure:

Root_directory with

public and server as sub-folders,

under the public folder, I have two files: app.js and index.html , and under the server folder I have only one file which is the server.js

Upvotes: 0

Yassine Bsf
Yassine Bsf

Reputation: 107

I solved my problem by adding ${pageContext.request.contextPath} to my jsp path.

instead of:

 <script src="static/js/jquery-3.2.1.min.js"></script>

I set:

 <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>

Upvotes: -15

bareMetal
bareMetal

Reputation: 551

Check for empty src in script tag.

In my case, i was dynamically populating src from script (php in my case), but in a particular case src remained empty, which caused this error.

Like this:

 <script src=""></script> //empty src causes error

So instead of empty src in script tag, I removed the script tag all together.

Like this:

if($src !== ''){
    echo '<script src="'.$src.'"></script>';
}

Upvotes: 1

Guiver
Guiver

Reputation: 1

I got the same error. I realized my app.js was in another folder.

I just moved it into that folder where my index.html file is and it resolved.

Upvotes: 0

Wesley L&#252;bke
Wesley L&#252;bke

Reputation: 1

By adding type="text/javascript" to the script tag worked for me.

<script type="text/javascript" src="js/i18n.js.php"></script>

Upvotes: -2

Markus
Markus

Reputation: 839

In my situation in was because its MIME type ('application/html') is not executable, and strict MIME type checking is enabled was the error from GoDaddy using Bridge Theme with QI Slider loading Bootstrap: carousel.js v3.0.0 and was missing transitions.js.

Add CDN from cloudflare transition.js v3.2.0.

CDN is here:

https://www.cdnpkg.com/twitter-bootstrap/file/transition.js

Upvotes: -1

sahilatahar
sahilatahar

Reputation: 915

In my case, I wrote:

<script src="./script.js"></script>

Instead of:

<script src="/script.js"></script>

I was adding a dot at starting of path which was my mistake.

Upvotes: 1

Jeremy Thompson
Jeremy Thompson

Reputation: 65534

After a npm run build I tried to open the Index.html file locally and got the error in title. I tried using Live Server and found the paths to resources were incorrect.

To work around this I used http-server to run the app locally:

Install http-server globally if you haven't already:

npm install -g http-server

Navigate to your build folder:

cd your/build/folder

Start the server:

http-server

It will prompt you to open localhost:8080

Upvotes: 0

being01amit
being01amit

Reputation: 19

You can use just use type:

<script type='text/javascript' src="fileType.js"></script>

or whichever type you're using, you choose that file type.

Upvotes: 1

Juan Olvera
Juan Olvera

Reputation: 21

Particular case with Cloudfront distribution.

I was serving a umd.cjs file as a CDN, and got the error:

The resource from “https://your.distribution.com/library.umd.cjs” was blocked due to MIME type (“binary/octet-stream”) mismatch (X-Content-Type-Options: nosniff).

I was saving a .js library in a S3 bucket but because of the extension umd.cjs the S3 tagged the file as binary, so I had to change the metadata of this file manually and set the content-type to "application/javascript"

If you have a particular case as me, try to find any useful or extra metadata that you can configure in your service providers.

Upvotes: 0

Paulina
Paulina

Reputation: 15

Just try with CTRL+F5, helped in my case. It's probably a cache problem.

Upvotes: -1

Tommy Leong
Tommy Leong

Reputation: 3020

In my case, there was no code change nor deployment and it was actually accessible a day before yet im seeing this issue.

I resolved this by clearing my browser data for the past 24hours. enter image description here

Upvotes: 0

xirehat
xirehat

Reputation: 1629

In my case that script file has wrong suffix name. I used script.min.js instead of script.js.min

Upvotes: -1

Md Shahriar
Md Shahriar

Reputation: 2736

In Angular Development try this enter image description here

Upvotes: -1

Nimesh
Nimesh

Reputation: 3610

Try to use express.static() if you are using Node.js.

You simply need to pass the name of the directory where you keep your static assets, to the express.static middleware to start serving the files directly. For example, if you keep your images, CSS, and JavaScript files in a directory named public, you can do as below −

i.e. : app.use(express.static('public'));

This approach resolved my issue.

Upvotes: 19

Sukarna Paul
Sukarna Paul

Reputation: 21

In my case, while executing my typescript file, I wrote:

<script src="./script.ts"></script>

Instead of:

<script src="./script.js"></script>

Upvotes: 2

Jon Wang
Jon Wang

Reputation: 319

I am using SpringMVC+tomcat+React

@Anfuca's answer does not work for me(force cleaning the browser's cache)

I used Filter to forward specific url pattern to the React's index.html

public class FrontFilter extends HttpFilter {
    @Override
    protected void doFilter(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException {
        boolean startsWithApi = requestURI.startsWith("/api/");
        boolean isFrontendUri = requestURI.startsWith("/index.html");

        if (!startsWithApi && !isFrontendUri) {
            req.getRequestDispatcher("/index.html").forward(req, res);
        }

        super.doFilter(wrapped, res, chain);
    }
}

There is no Spring Security problem bcs my filter executes before Spring Security's

but I still see the same error and find here

Then I realized that I forgot adding one more condition for JS and CSS:

boolean startsWithStatic = requestURI.startsWith(contextPath + "/static");

Add this to my if condition and problem solved, no more error with MIME type or ('text/html') with js and css

Root cause is that I incorrectly forward JS and CSS type to HTML type

Upvotes: 0

semiColon
semiColon

Reputation: 201

In my case Spring Security was looking for authentication before allowing calls to external libraries. I had a folder /dist/.. that I had added to the project, once I added the folder to the ignore list in my WebSecurityConfig class, it worked fine.

web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/error", "/dist/**");

Upvotes: 1

Anfuca
Anfuca

Reputation: 1329

In my case (React app), just force cleaning the cache and it worked.

Upvotes: 3

Ahmed Bermawy
Ahmed Bermawy

Reputation: 2530

In my case, I was working on legacy code

and I have this line of code

<script type="text/javascript" src="js/i18n.js.php"></script>

I was confused about how this supposed to work this code was calling PHP file not js

despite it was working on the live server

but I have this error on the stage sever

and the content type was

content-type: text/html; charset=UTF-8

enter image description here

even it is text/javascript in the script tag

and after I added

header('Content-Type: text/javascript');

at the beginning for file i18n.js.php

the error is fixed

enter image description here

Upvotes: 13

Houssine Ayedi
Houssine Ayedi

Reputation: 11

My problem was that I have been putting the CSS files in the scripts definition area just above the end of the Try to check the files spots within your pages

Upvotes: 0

Ryan Shillington
Ryan Shillington

Reputation: 25088

I had my web server returning:

Content-Type: application\javascript

and couldn't for the life of me figure out what was wrong. Then I realized I had the slash in the wrong direction. It should be:

Content-Type: application/javascript

Upvotes: 2

s1m3n
s1m3n

Reputation: 623

In my case I had a symlink for the 404'd file and my Tomcat was not configured to allow symlinks.

I know that it is not likely to be the cause for most people, but if you are desperate, check this possibility just in case.

Upvotes: -1

MH Fuad
MH Fuad

Reputation: 775

I hade same problem then i fixed like this

change "text/javascript"

to

type="application/json"

Upvotes: -3

Ariel
Ariel

Reputation: 1

If you have a route on express such as:

app.get("*", (req, res) => {
  ...
});

Try to change it for something more specific:

app.get("/", (req, res) => {
  ...
});

For example.

Or else you just might find yourself recursively serving the same HTML template over and over...

Upvotes: -1

Devandran
Devandran

Reputation: 456

Python flask

On Windows, it uses data from the registry, so if the "Content Type" value in HKCR/.js is not set to the proper MIME type it can cause your problem.

Open regedit and go to the HKEY_CLASSES_ROOT make sure the key .js/Content Type has the value text/javascript

C:\>reg query HKCR\.js /v "Content Type"

HKEY_CLASSES_ROOT\.js
    Content Type    REG_SZ    text/javascript

Upvotes: 3

OZZIE
OZZIE

Reputation: 7338

I accidentally named the js file .min instead of .min.js ...

Upvotes: 3

Related Questions