拒绝执行脚本 from 因为其 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查 [英] Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

查看:375
本文介绍了拒绝执行脚本 from 因为其 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试设置反应路由,当我单击我网站上的某些内容时,该路由有效,但是,如果我打开一个新选项卡并复制该 url.我得到

I am trying to setup react routing which works when I click on something on my site the route works, however if I open a new tab and copy that url. I get

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

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

推荐答案

您的 webpack 配置格式不正确.所以你的 devServer 返回的是后备 html 文件而不是包.

Your webpack config is malformed. So your devServer is returning the fallback html file instead of the bundle.

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

Hence why the script is served with the ('text/html') MIME type.

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

你的意思可能是这样的:

You probably meant something like this:

devServer: {
  historyApiFallback: true
}

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

这篇关于拒绝执行脚本 from 因为其 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆