拒绝执行来自' 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>
请帮我解决这个问题。
答案 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