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

Posted 2023-02-21

【中文标题】拒绝执行脚本，因为它的 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拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查

【发布时间】：2018-09-20 11:41:17

【问题描述】：

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

【参考方案1】：

通过编辑这个来编辑 webpack 配置：

    devServer: 
                 historyApiFallback: true
               

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

     <base href="/" />

这应该可以解决问题..

【讨论】：

如果在 webpack 配置中添加 <base href="/" /> 部分是不必要的：output: publicPath: '/'

两个都加了 - 然后就修复了。

我的情况我需要两者来解决我的问题。

【参考方案2】：

您的 webpack 配置格式错误。 所以你的 devServer 返回的是后备 html 文件而不是包。

因此脚本使用 ('text/html') MIME 类型提供。

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

你的意思可能是这样的：

devServer: 
  historyApiFallback: true

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

【讨论】：

我遇到了类似的问题，但没有通过使用 historyApiFallback 解决。这个问题看起来是指 Webpack 3，而不是 Webpack 4。

@Underwater_developer 如果您使用的是 webpack-dev-server，很可能因为 historyApiFallback 为您提供 html 文件而不是脚本。如果没有更多细节，我无法为您提供更多帮助。

***.com/questions/45133342/… 有一些 magic html 标记为我纠正了这个问题 shrug

【参考方案3】：

也许你指错了

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

<script src="js/utils.js"></script>    // OK

【参考方案4】：

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

X-Content-Type-Options: nosniff

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

【参考方案5】：

我得到了同样的错误，并发现我需要在

中更改我的脚本

index.html

来自

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

到

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

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

【参考方案6】：

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

【参考方案7】：

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

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

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