首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >拒绝执行中的脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查

拒绝执行中的脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查
EN

Stack Overflow用户
提问于 2018-04-11 02:27:58
回答 6查看 45.2K关注 0票数 19

我正在尝试设置react路由,当我在我的网站上点击一些东西时,路由就会工作,但是如果我打开一个新的标签并复制那个url。我得到了

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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')
);

商店

代码语言:javascript
复制
import {RouterStore} from 'mobx-react-router';

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

export default stores;

我也尝试过historyApiFallback: true

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2018-04-11 02:34:57

您的webpack配置格式不正确。因此,您的devServer将返回备用html文件,而不是包。

这就是为什么脚本使用('text/html') MIME类型。

代码语言:javascript
复制
devServer: {
    historyApiFallback:{
      index:'/dist/index.html'
    },
  }

你的意思可能是这样的:

代码语言:javascript
复制
devServer: {
  historyApiFallback: true
}

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

票数 6
EN

Stack Overflow用户

发布于 2018-06-14 15:38:49

只需编辑以下内容即可编辑webpack配置:

代码语言:javascript
复制
    devServer: {
                 historyApiFallback: true
               }

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

代码语言:javascript
复制
     <base href="/" />

这个应该行得通..

票数 10
EN

Stack Overflow用户

发布于 2018-06-16 04:53:26

也许你是指错了

代码语言:javascript
复制
<script src="utils.js"></script>        // NOT ok. Refused to execute script..MIME

<script src="js/utils.js"></script>    // OK
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49760641

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档