JavaScript MIME type warning on Firefox
I fear that due to this problem, on some browser the JS file might not load at all. What is the possible reason for this and how can I solve this issue?
I get this warning by HTML using a router (called by .htaccess file) for its loading of a .js file, not using any type attribute in the script element, but only on Firefox, not on Chrome. A bug in Firefox?
4 Answers 4
Remove the type or change it to «text/javascript» .
In html5 spec the type is not required unless it is not javascript
mozilla says «Note: Even though any given user agent may support any or all of these, you should only use text/javascript. It’s the only MIME type guaranteed to work now and into the future.»
To add onto evilpie’s answer, the root cause for me was using the basic py -m http.server for local testing. In order to correctly assign .js files the ‘text/javascript’ MIME type, I instead use this script from Github user HaiyangXu.
# -*- coding: utf-8 -*- #test on python 3.4 ,python of lower version has different module organization. import http.server from http.server import HTTPServer, BaseHTTPRequestHandler import socketserver PORT = 8080 Handler = http.server.SimpleHTTPRequestHandler Handler.extensions_map= < '.manifest': 'text/cache-manifest', '.html': 'text/html', '.png': 'image/png', '.jpg': 'image/jpg', '.svg': 'image/svg+xml', '.css': 'text/css', '.js': 'application/x-javascript', '': 'application/octet-stream', # Default >httpd = socketserver.TCPServer(("", PORT), Handler) print("serving at port", PORT) httpd.serve_forever() Chrome refuses to execute an AJAX script due to wrong MIME type
I’m trying to access a script as JSON via AJAX, which works fine on Safari and other browsers but unfortunately will not execute in Chrome. It’s coming with the following error:
Refused to execute script from ‘*’ because its MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled.
$.ajax(< url: "http://some_url/test.json?callback=?", type: "GET", dataType: 'json', cache: true, success: function (data, status, error) < console.log('success', data); >, error: function (data, status, error) < console.log('error', data, status, error); >>); So, what is this ressource? A JSONP script, or a JSON file? Does its MIME type match that? Apparently not. No need for a workaround, just fix it.
@Bergi: what if the server is outside of the OP’s control? Maybe he’s trying to use an external API such as LinkedIn.
@DanDascalescu: He should report this as a bug, because it makes the API unusable. While waiting for this to be fixed, he can use a proxy that changes mime type or content.
7 Answers 7
By adding a callback argument, you are telling jQuery that you want to make a request for JSONP using a script element instead of a request for JSON using XMLHttpRequest.
JSONP is not JSON. It is a JavaScript program.
Change your server so it outputs the right MIME type for JSONP which is application/javascript .
(While you are at it, stop telling jQuery that you are expecting JSON as that is contradictory: dataType: ‘jsonp’ ).
MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled
Refused to execute script from ‘http://localhost:8080/edit/bundle.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled. I am using react-router and i got this error while using
it is working fine with just /edit but giving error on /edit/:id. I don’t understand why this is happening. Here are the files: This is the AppRouter file.
import React from 'react'; import ReactDOM from 'react-dom'; import < BrowserRouter, Route, Switch, Link, NavLink >from 'react-router-dom'; import Header from './../components/Header'; import ExpenseDashboardPage from './../components/ExpenseDashboardPage'; import AddExpenses from './../components/AddExpensePage'; import EditExpensePage from './../components/EditExpensePage'; import NotFoundPage from './../components/NotFoundPage'; import HelpPage from './../components/HelpPage'; const AppRouter = () => ( exact= /> /> /> /> /> ); export default AppRouter; import React from 'react'; const EditExpensePage = (props) => < console.log(props); return ( Edit your expenses Here
); > export default EditExpensePage; const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/app.js', output: < path: path.join(__dirname, 'public'), filename: 'bundle.js' >, module: < rules: [< test: /\.js$/, exclude: /node_modules/, use: < loader: 'babel-loader' >>, < test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] >] >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html' >) ], devtool: 'cheap-module-eval-source-map', devServer: < historyApiFallback: true >> Refused to execute script because strict MIME type checking is enabled
I have setup an NGINX reverse proxy to a web service (www.aaa.com) through another domain name (www.bbb.com) while adding a few additional pages to the latter. Request come from www.bbb.com (nodejs app) but they need to look like they are coming from www.aaa.com or I will have a CORS (Cross-origin resource sharing) issue. Hence NGINX to tweak the headers.
NGINX config
worker_processes 1; events < worker_connections 1024; >http < include mime.types; include servers/*; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server < listen 443 ssl; server_name www.bbb.com; ssl_certificate /etc/pki/nginx/server.crt; ssl_certificate_key /etc/pki/nginx/private/server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / < proxy_set_header X-Real-IP 127.0.0.1; proxy_set_header Host www.aaa.com; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_pass https://www.aaa.com; proxy_http_version 1.1; >> > Looks like one of the resources doesn’t get the correct MIME Type through the reverse proxy https://www.aaa.com/scripts/some.script.api.js
Error
Refused to execute script from ‘https://www.bbb.com/scripts/some.script.api.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
text/html is incorrect indeed, I would be expecting application/javascript 1. Why is this happening? I figured that MIME Types are just set automatically? Could that be that www.aaa.com has implement some new CORS security rule? 2. Is there a way to tell NGINX to set the correct MIME Type for that particular file? I have tried a few things to no avail. e.g.
add_header Content-Type application/javascript;