MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查答案

【问题标题】：MIME type ('text/html') is not executable, and strict MIME type checking is enabledMIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查
【发布时间】：2018-09-12 00:49:12
【问题描述】：

拒绝执行来自 'http://localhost:8080/edit/bundle.js' 的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

我正在使用 react-router，但在使用时出现此错误

<Route path="/edit/:id" component={EditExpensePage} />

仅使用 /edit 就可以正常工作，但在 /edit/:id 上会出错。我不明白为什么会这样。以下是文件：这是 AppRouter 文件。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Header from './../components/Header';
import ExpenseDashboardPage from './../components/ExpenseDashboardPage';
import AddExpenses from './../components/AddExpensePage';
import EditExpensePage from './../components/EditExpensePage';
import NotFoundPage from './../components/NotFoundPage';
import HelpPage from './../components/HelpPage';

const AppRouter = () => (
  <BrowserRouter>
  <div>
    <Header />
    <Switch>
      <Route path="/" component={ExpenseDashboardPage} exact={true} />
      <Route path="/create" component={AddExpenses} />
      <Route path="/edit/:id" component={EditExpensePage} />
      <Route path="/help" component={HelpPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </div>
</BrowserRouter>
);

export default AppRouter;

这是 EditExpenses 文件：

import React from 'react';

const EditExpensePage = (props) => {
  console.log(props);
  return (
    <div>
      <p>Edit your expenses Here</p>
    </div>
  );  
}

export default EditExpensePage;

这是我的 Webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
      }
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    historyApiFallback: true
  }
}

还有new HtmlWebpackPlugin生成的index.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Expensify</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

请帮我解决这个问题。

【问题讨论】：

类型应该是application/javascript，而不是text/javascript。
不，它也不适用于application/javascript。
你的服务器代码是什么样的？当我的响应标头中有X-Content-Type-Options: nosniff 时，我看到了这个错误。如果您转到您的开发人员工具并查看/edit/bundle.js 的请求，响应的内容类型是什么？有X-Content-Type-Options 设置吗？
我遇到了同样的问题。 This SO solution 为我工作。
@kamal11 你是怎么解决这个问题的？

标签： reactjs react-router

【解决方案1】：

尝试改变

<script type="text/javascript" src="bundle.js"></script>

到

<script type="text/javascript" src="/bundle.js"></script>

【讨论】：

【解决方案2】：

在 webpack.config.js 的输出中添加公共路径有效：

output: {
      path: `${__dirname}/dist`,
      filename: 'bundle.js',
      publicPath: '/',
    }

【讨论】：

【解决方案3】：

尝试更改 webpack.config.js 添加公共路径

output: {
   path: path.join(__dirname, 'public'),
   filename: 'bundle.js',
   publicPath: '/',        
}

【讨论】：

【解决方案4】：

检查 DevTools 中的网络选项卡，查看以 text/html 形式返回的请求网络资产的路径，然后尝试在常规网络浏览器中加载它。

在我的情况下，这是一条错误消息，而不是 javascript 返回，因此是错误的 mimeType。

由于其他原因（在我的情况下是 TypesScript 错误），捆绑包未能构建，并且 devServer 返回错误而不是应用程序期望的 js 文件。

【讨论】：

【解决方案5】：

FWIW，我也遇到了这个错误（我正在使用 Angular）。在我的例子中，这是因为 HTML 文件试图加载 JS 文件并且它不再存在 - 因此返回的实际内容是根 HTML 页面而不是 JS 文件（因为使用了角度哈希路由）。

这是由于浏览器使用了旧的缓存 HTML 文件 - 该文件指向来自旧版本的捆绑 JS 文件（即 main.ABCD1234.js），因此实际上不在我的托管站点上。

我的解决方案是让浏览器下载指向正确 JS 文件的最新 HTML 文件:)。

【讨论】：

【解决方案6】：

可能是由于许多不同的问题，我的问题已经解决了（尽管我的其他应用程序不需要这样做......） loading a bundle.js file from webpack changes mime type to text/html

【讨论】：