Refused to execute script from because its MIME type (…) and strict MIME type (…)

问题

Hi all I work currently on Express and get this error message trying to open my index.html :

Refused to execute script from 'http://localhost:7500/app.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. - From localhost/:1 -

Basically I try currently for configuring MIME type since it seems the problem come from it.

here my tree structure :

.
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.map
│   ├── index.html
│   ├── ninja.json
│   ├── picture.jpeg
│   ├── style.css
│   └── test.txt
├── package.json
├── package-lock.json
├── router
│   └── router.js
├── server
├── server.js
├── src
│   └── App.jsx
├── static
│   └── index.html
├── tsconfig.json
└── webpack.config.js

HTML :

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title> React Components </title>

</head>
<body>


      <h2> 1 </h2>

  <button style="height: 50px ; width : 250px ;" id="getText"> Get text </button>
  <button style="height: 50px ; width : 250px ;" id="getUser"> Get user </button>
  <button style="height: 50px ; width : 250px ;" id="getPosts"> GetPosts : Get API DATA </button>
<hr>

<div id="output"></div>
<form  id="addPost">

  <div>
    <input type="text" id="title" placeholder="Title">
  </div>

  <div>
      <textarea name="" id="body" cols="30" rows="10" placeholder="Body">

      </textarea>
  </div>

  <input type="submit" value="Submit">
  </form>
  <script src="app.bundle.js"></script>

  <img id='picture1' style='width : 125px ;' alt="">
</body>
</html>

JSX : App.jsx

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch' ;
document.getElementById('getText').addEventListener('click', getText);
document.getElementById('getUser').addEventListener('click', getUser);
document.getElementById('getPosts').addEventListener('click', getPosts);
document.getElementById('addPost').addEventListener('submit', addPost);

function getText(){
fetch('/test.txt')
.then((res) =>  res.text()).
then((data) => document.getElementById('output').innerHTML = data ).
catch((err) => console.log(err));
};


function getUser(){
fetch('/ninja.json')
.then((res) => res.json())
.then((data) => {
    let output = '<h2> Users </h2>';
        data.forEach(function (user){
            output += `
                <ul>                <li> ${user.username}</li>
                    <li> Location: ${user.location}</li>
                    <li> ${user.online} </li>
                    <li> ${user.followers}</li>
            </ul>
            `
    });
    document.getElementById('output').innerHTML = output;
});
}

function getPosts(){
fetch('http://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
    let output = '<h2> Users </h2>';
        data.forEach(function (post){
            output += `
                <div>
                <h3> Title : ${post.title} </h3>
                <p> Body : ${post.body} </p>
            </div>
            `
    });
    document.getElementById('output').innerHTML = output;
});
}
function addPost(e){
    e.preventDefault() ;
        let title = document.getElementById('title').value;
        let body = document.getElementById('body').value;

        fetch('http://jsonplaceholder.typicode.com/posts', {
            method : 'POST',
            headers : {
                    'Accept' : 'application/json, text//plain, */*',
                    'Content-type' : 'application/json'
            },
            body : JSON.stringify({ title : title, body : body })
        })
        .then((res) =>res.json())
        .then((data) => console.log(data));
}

JS server.js

require("babel-polyfill");
var express = require('express');
var app = express();
var port = 7500 ;


app.get("/", (req, res) => {
 res.sendFile(__dirname + "/dist/index.html");
});




app.listen(port, function() {

    console.log('server started in port ' + port);

}) ;


app.use(express.static(__dirname + 'dist'));

package.json 

{
  "name": "reactdevelopment",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/nodemon ./server.js",
    "devserver": "node_modules/.bin/webpack-dev-server --hot --inline",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-node4": "^2.1.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "create-react-class": "^15.6.3",
    "node": "^10.0.0",
    "nodemon": "^1.17.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "^4.2.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "es6-promise": "^4.2.4",
    "express": "^4.16.3",
    "fetch": "^1.1.0",
    "isomorphic-fetch": "^2.2.1",
    "mongo": "^0.1.0",
    "mongod": "^2.0.0",
    "mongodb": "^3.0.7",
    "mongoose": "^5.0.16",
    "source-map": "^0.7.2"
  }
}

webpack.config.js

const webpack = require('webpack');

module.exports = { 

 devtool: 'source-map',
 entry: {
     app:  __dirname +'/src/App.jsx'

  },
  output: {
    path:  __dirname + '/dist',
    filename: 'app.bundle.js'
  },

  module: {
    rules: [
      {
        test: /\App.jsx$/,
        loader: 'babel-loader',
        query: {
          presets: ['react','es2015']
        }
      }
    ]
  },

    devtool : '#source-map',

    optimization : { 

        splitChunks: {
            chunks: "async",
            minSize: 3000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
            }
        }
    },
  devServer: {

    port: 8000,
    contentBase: 'static',
    proxy: {
      '/api/*': {
        target: 'http://localhost:7500'
      }
    }
  }
};

If you have advices, linked documentation , indication or hint it's would be great, Thank you

回答1:

now /app.bundle.js returns

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /app.bundle.js</pre>
</body>
</html>

because of a setting mistake.

NG: app.use(express.static(__dirname + 'dist'));
OK: app.use(express.static(__dirname + '/dist'));

__dirname does not include the trailing slash.

To suppose the correct path is /.../myApp/dist/app.bundle.js
index.html sources app.bundle.js as javascript file, which MIME is expected to be text/javascript, etc.
now app.use(express.static(__dirname + 'dist'))
==> app.use(express.static('/.../myAppdist/app.bundle.js')) does not exist.
express returns 404 error response with HTML, which MIME is text/html

回答2:

I read somewhere that forcing tag with prop: <script type="application/javascript"> solves this issue.. or if it's trying to retrieve an external JSON: type="application/json".. Don't know if it will help..

来源：https://stackoverflow.com/questions/50143297/refused-to-execute-script-from-because-its-mime-type-and-strict-mime-type

标签

http

express

server

configuration