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

时间:2018-04-02 19:21:40

标签: reactjs react-router

拒绝执行来自' http://localhost:8080/edit/bundle.js'的脚本因为它的MIME类型(' text / html')不可执行,并且启用了严格的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>

请帮我解决这个问题。

6 个答案:

答案 0 :(得分:7)

尝试更改

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

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