19

我正在尝试设置反应路由，当我单击网站上的某些内容时该路由有效，但是如果我打开一个新选项卡并复制该 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

4

7 回答 7

10

只需通过编辑以下内容来编辑 webpack 配置：

    devServer: {
                 historyApiFallback: true
               }

并将其添加到 public/index.html：

     <base href="/" />

这应该可以解决问题..

于 2018-06-14T07:38:48.620 回答
6

你的 webpack 配置格式不正确。因此，您的 devServer 将返回后备 html 文件而不是捆绑包。

因此，为什么脚本使用 ('text/html') MIME 类型。

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

你的意思可能是这样的：

devServer: {
  historyApiFallback: true
}

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

于 2018-04-10T18:34:56.503 回答
4

也许你指错了

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

<script src="js/utils.js"></script>    // OK
于 2018-06-15T20:53:26.307 回答
3

作为安全审计解决方案的一部分，我最近不得不将以下内容添加到标题中

X-Content-Type-Options: nosniff

之后我开始收到这些错误。我还没有找到一个永久的解决方案。这些页面似乎正在工作。控制台中的噪音很烦人！

于 2018-05-08T20:05:50.410 回答
1

我得到了同样的错误，发现我需要更改我的脚本

索引.html

从

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

至

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

所以如果你有一个“。” 或者你的文件前面什么都没有，只需用“/”替换它。我希望这对您或其他人有所帮助。

于 2018-10-11T00:13:34.720 回答
0

可能导致这种情况的另一件事是如果contentBase属性设置不正确。这对我们来说是因为我们正在请求一个 JS 文件但得到一个 404 并且 webpack-dev-server 提供的 404“页面”返回为text/html.

于 2018-08-28T18:04:23.077 回答
0

就我而言，我遇到了这个问题，因为构建过程实际上并没有构建 JavaScript 包。

该构建只是发出警告而不是错误（！），因此仅在将构建推送到分阶段部署环境时才发现此问题。

因此，为了解决这个问题，我修复了未构建捆绑包的问题。

于 2019-04-24T14:25:28.070 回答