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

Question

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

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

我正在使用react-router,我在使用时收到此错误

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这是EditExpenses文件:

import React from 'react';

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

export default EditExpensePage;

Run Code Online (Sandbox Code Playgroud)

这是我的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
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

请帮我解决这个问题.

Answer 1

小智 10

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Chr*_*ing 7

尝试改变

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

Run Code Online (Sandbox Code Playgroud)

至

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，7 月前
查看次数：	9873 次
最近记录：	6 年，8 月前