web-dev-qa-db-ja.com

MIMEタイプ（ 'text / html'）が実行可能ではなく、厳密なMIMEタイプチェックが有効になっているため、スクリプトの実行を拒否しました

私はサイト上の何かをクリックするとルートが機能するリアクションルーティングをセットアップしようとしていますが、新しいタブを開いてそのURLをコピーすると。私は得る

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')
);

店舗

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

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

export default stores;

私も試してみましたhistoryApiFallback: true

webpackreact-routerwebpack-4
10
chobo2

Webpackの構成が正しくありません。そのため、devServerはバンドルではなくフォールバックHTMLファイルを返します。

したがって、スクリプトが（ 'text/html'）MIMEタイプで提供される理由。

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

あなたはおそらく次のようなものを意味しました：

devServer: {
  historyApiFallback: true
}

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

6
Omri Luzon

これを編集してwebpack configを編集するだけです：

    devServer: {
                 historyApiFallback: true
               }

また、これをpublic/index.htmlに追加します。

     <base href="/" />

これでうまくいくはずです。

7
Adnan shah

たぶんあなたは間違って指している

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

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

私は最近、セキュリティ監査の解決の一環として、ヘッダーに次を追加する必要がありました

X-Content-Type-Options: nosniff

その後、これらのエラーが発生し始めました。これに対する永続的な解決策はまだわかりません。しかし、ページは機能しているようです。コンソールのノイズはうっとうしいです！

1
James Poulose

まったく同じエラーが発生し、スクリプトを変更する必要があることがわかりました

index.html

から

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

に

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

「。」がある場合またはファイルの前に何もない場合は、単に「/」に置き換えてください。これがあなたや他の誰かに役立つことを願っています。

0
Mo Hemati

私の場合、ビルドプロセスが実際にJavaScriptバンドルをビルドしなかったため、この問題が発生しました。

ビルドはエラー（！）ではなく警告を発しただけなので、この問題はビルドがステージングされたデプロイメント環境にプッシュされたときにのみ検出されました。

したがって、この問題を解決するために、バンドルがビルドされないという問題を修正しました。

0
Ben Smith

これを引き起こす可能性があるもう1つのことは、contentBaseプロパティが正しく設定されていない場合です。これは、JSファイルを要求していたが、webpack-dev-serverによって提供される404および404「ページ」がtext/html。

0
icfantv