Question

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

我正在使用react-router，我在使用

时收到此错误

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

它只是/编辑正常工作但在/ 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
  }
}

还有新的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>

请帮我解决这个问题。

Answer 1

尝试更改

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

要

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

Answer 2

尝试更改webpack.config.js 添加publicPath

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

Answer 3

FWIW，我也有这个错误（我使用的是 Angular）。就我而言，这是因为 HTML 文件试图加载 JS 文件而它不再存在 - 因此返回的实际内容是根 HTML 页面而不是 JS 文件（因为使用了角度散列路由）。

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

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

Answer 4

在DevTools中检查“网络”选项卡，以文本/ html的形式返回所请求的网络资产的路径，然后尝试将其加载到常规Web浏览器中。

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

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

Answer 5

在webpack.config.js的输出中添加公用路径的工作原理：

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

Answer 6

可能由于许多不同的问题，我的问题已得到解决（即使我的其他应用程序中不需要此问题...） loading a bundle.js file from webpack changes mime type to text/html

MIME类型（＆＃39; text / html＆＃39;）不可执行，并且启用了严格的MIME类型检查

6 个答案: