Отказался от выполнения сценария из-за того, что его тип 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


person chobo2    schedule 10.04.2018    source источник


Ответы (7)


Конфигурация вашего веб-пакета искажена. Итак, ваш devServer возвращает резервный html-файл вместо пакета.

Следовательно, сценарий обслуживается с типом MIME ('text / html').

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

Вы, наверное, имели в виду что-то вроде этого:

devServer: {
  historyApiFallback: true
}

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

person Omri Luzon    schedule 10.04.2018
comment
У меня аналогичная проблема, но она не решается с помощью historyApiFallback. Однако похоже, что эта проблема относится к Webpack 3, а не к Webpack 4. - person Underwater_developer; 19.04.2018
comment
@Underwater_developer. Если вы используете webpack-dev-server, это наиболее вероятно из-за того, что historyApiFallback предоставляет вам html-файл вместо скрипта. Без более подробной информации я не могу вам помочь больше. - person Omri Luzon; 19.04.2018
comment
stackoverflow.com/questions/45133342/ Есть некий волшебный тег html, который исправил это за меня пожимание плечами - person Underwater_developer; 19.04.2018

Просто отредактируйте конфигурацию webpack, отредактировав это:

    devServer: {
                 historyApiFallback: true
               }

А также добавьте это в public / index.html:

     <base href="/" />

Это должно помочь ..

person Adnan    schedule 14.06.2018
comment
Часть с <base href="/" /> не нужна, если вы добавляете это в конфигурацию webpack: output: { publicPath: '/' } - person LWY; 29.10.2018
comment
Добавил оба - потом поправили. - person Imdad; 18.02.2019
comment
В моем случае мне понадобились оба, чтобы решить мою проблему. - person Adnan; 18.02.2019

Может ты неправильно указываешь

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

<script src="js/utils.js"></script>    // OK
person Dan Alboteanu    schedule 15.06.2018

Недавно мне пришлось добавить следующее к заголовкам как часть решения аудита безопасности

X-Content-Type-Options: nosniff

После этого я начал получать эти ошибки. Я еще не нашел постоянного решения для этого. Хотя страницы вроде работают. Шум в консоли просто напрягает!

person James Poulose    schedule 08.05.2018

Я получил ту же самую ошибку и обнаружил, что мне нужно изменить свой скрипт в

index.html

от

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

to

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

так что если у вас есть "." или ничего перед вашим файлом, просто замените его на "/". Надеюсь, это поможет вам или кому-то еще.

person Mo Hemati    schedule 11.10.2018

Другая причина, которая может вызвать это, - неправильная установка свойства contentBase. Это возникло для нас, когда мы запрашивали файл JS, но получение 404 и 404 «страница», обслуживаемая webpack-dev-server, возвращается как text/html.

person icfantv    schedule 28.08.2018

В моем случае я столкнулся с этой проблемой, потому что процесс сборки на самом деле не создавал пакет JavaScript.

Сборка просто выдала предупреждение вместо ошибки (!), Поэтому эта проблема была обнаружена только тогда, когда сборка была отправлена ​​в среду поэтапного развертывания.

Следовательно, чтобы исправить эту проблему, я исправил проблему, из-за которой пакет не собирался.

person Ben Smith    schedule 24.04.2019