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

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

我正在使用React-Router，并且在使用

时遇到了这个错误

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

它可以通过/编辑使用正常，但是在/edit/：id上给出错误。我不明白为什么会发生这种情况。这是文件：这是Applouter文件。

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>

请帮助我解决此问题。

尝试更改

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

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

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

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

尝试

"homepage": ".",

create-react-app文档中提到的package.json内部。

P.S：也许我的答案很晚，但希望对那些无法解问题的人有用

检查DevTools中的"网络"选项卡，以查看所请求的网络资产的路径是返回文本/HTML的路径，然后尝试将其加载到常规的Web浏览器中。p>在我的情况下，这是一条错误消息，而不是javaScript回来，因此模仿错误。

捆绑包未能构建是出于另一个原因(在我的情况下是Tyxesscript错误(，而开发人员正在返回错误，而不是该应用程序所期望的JS文件。

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

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

可能是由于许多不同的问题，我的解决方案解决了(即使我的其他应用中不需要这一点...(从webpack加载bugdle.js文件，将MIME类型更改为文本/html

fwiw，我也有这个错误(我正在使用Angular(。就我而言，这是因为HTML文件试图加载JS文件，并且不再存在 - 因此，返回的实际内容是root HTML页面，而不是JS文件(因为使用了Angular Hash路由(。p>这是由于浏览器使用旧的缓存HTML文件 - 指向捆绑的JS文件(即Main.ABCD1234.JS(，该文件来自旧构建，因此实际上不在我的托管网站上。<<<<<<<<<<<<<<<<<<<<<</p>

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

我在 vpn 上遇到了此错误，> netskope 已启用。从VPN固定了它。

相关内容

最新更新

热门标签：