html - 如何修复“拒绝执行脚本,因为它的 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查。” 反应?
问题描述
我的 React 应用程序不会从我的本地文件夹中加载以下脚本。我将 webpack 更新到 4.0 版,每次尝试加载脚本时,都会出现以下错误:
拒绝执行来自 ' http://localhost:8080/components/homepage/texting.js ' 的脚本,因为它的 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My React App</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body style="margin:0">
<div id="app"></div>
<script type="application/javascript" src="./components/homepage/texting.js"></script>
</body>
网络包配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
解决方案
没关系,我解决了!我刚刚将所有 JavaScript 移到 ComponentDidMount()
推荐阅读
- java - 如何获得可嵌入的变化?
- python - 如何使用python根据条件将xml文件中的xml元素放入列表或字典中?
- c# - Dapper 参数扩展和 FROM 子句
- python - For循环未初始化
- javascript - 使用 webapack 4 为每个条目创建 vendor.bundle
- c# - Unity 游戏中心登录
- node.js - 使 nodejs 应用程序在 0.0.0.0 而不是 localhost 上运行
- google-apps-script - 检查其他用户是否正在编辑 Google 表格
- kubernetes - 无法从 k8s Pod 访问外部网络
- javascript - 根据复选框切换数据表行