web-dev-qa-db-fra.com

Refusé d'exécuter le script à partir de parce que son type MIME ('text/html') n'est pas exécutable et que la vérification de type MIME stricte est activée

J'essaie de configurer le routage de réaction qui fonctionne lorsque je clique sur quelque chose sur mon site. La route fonctionne. Toutefois, si j'ouvre un nouvel onglet et copie cet URL Je reçois

Refused to execute script from 'http://localhost:8080/something/index_bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

webpack.config 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.s?css$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    historyApiFallback:{
      index:'/dist/index.html'
    },
  }
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider  } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'

import AppContainer from './components/App';

const browserHistory = createBrowserHistory();

import stores from '../src/stores/Stores';

const history = syncHistoryWithStore(browserHistory, stores.routingStore);

ReactDOM.render(
    <Provider {... stores}>
        <Router history={history}>
           <AppContainer />
        </Router>
    </Provider>,      
       document.getElementById('app')
);

magasins

import {RouterStore} from 'mobx-react-router';

const routingStore = new RouterStore();
const stores = {
    routingStore
}

export default stores;

J'ai aussi essayé historyApiFallback: true

webpackreact-routerwebpack-4
6
chobo2

Votre configuration de pack Web est mal formée . Ainsi, votre devServer renvoie le fichier HTML de secours au lieu du paquet.

D'où la raison pour laquelle le script est servi avec le type MIME ('text/html').

devServer: {
    historyApiFallback:{
      index:'/dist/index.html'
    },
  }

Vous avez probablement voulu dire quelque chose comme ça:

devServer: {
  historyApiFallback: true
}

https://webpack.js.org/configuration/dev-server/

5
Omri Luzon

Il suffit de modifier la configuration Webpack en modifiant ceci:

    devServer: {
                 historyApiFallback: true
               }

Et ajoutez également ceci à public/index.html:

     <base href="/" />

Cela devrait faire l'affaire.. 

7
Adnan shah

Peut-être que vous pointez incorrectement

<script src="utils.js"></script>        // NOT ok. Refused to execute script..MIME

<script src="js/utils.js"></script>    // OK
4
Dan Alboteanu

J'ai la même erreur exacte et découvre que je dois changer mon script dans 

index.html

de 

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

à 

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

donc si vous avez un "." ou rien devant votre fichier, remplacez-le simplement par "/". J'espère que cela vous aide ou aide quelqu'un d'autre.

0
Mo Hemati

Cela peut également être causé si la propriété contentBase n'est pas définie correctement. Cela nous est venu en ce sens que nous demandions un fichier JS, mais obtenir une 404 et la "page" 404 servies par webpack-dev-server revient sous la forme text/html.

0
icfantv

J'ai récemment dû ajouter ce qui suit aux en-têtes dans le cadre d'une résolution d'audit de sécurité

X-Content-Type-Options: nosniff

Après cela, j'ai commencé à avoir ces erreurs. Je suis encore à trouver une solution permanente pour cela. Les pages semblent bien fonctionner. Le bruit dans la console est juste énervant!

0
James Poulose