拒绝执行脚本,因为它的 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查
Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
我正在尝试设置 React 路由,当我在我的网站上单击某些内容时该路由有效,但是如果我打开一个新选项卡并复制它 url。我得到
Refused to execute script from 'http://localhost:8080/something/index_bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
webpack.config
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: /\.s?css$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
historyApiFallback:{
index:'/dist/index.html'
},
}
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'
import AppContainer from './components/App';
const browserHistory = createBrowserHistory();
import stores from '../src/stores/Stores';
const history = syncHistoryWithStore(browserHistory, stores.routingStore);
ReactDOM.render(
<Provider {... stores}>
<Router history={history}>
<AppContainer />
</Router>
</Provider>,
document.getElementById('app')
);
店铺
import {RouterStore} from 'mobx-react-router';
const routingStore = new RouterStore();
const stores = {
routingStore
}
export default stores;
我也试过了historyApiFallback: true
您的 webpack 配置格式不正确。
所以你的 devServer 返回后备 html 文件而不是包。
因此脚本使用 ('text/html') MIME 类型提供。
devServer: {
historyApiFallback:{
index:'/dist/index.html'
},
}
你的意思可能是这样的:
devServer: {
historyApiFallback: true
}
我最近不得不将以下内容添加到 headers 作为安全审计决议的一部分
X-Content-Type-Options: nosniff
之后我开始收到这些错误。我还没有找到一个永久的解决方案。这些页面似乎正在工作。控制台的噪音真烦人!
只需通过编辑以下内容来编辑 webpack 配置:
devServer: {
historyApiFallback: true
}
并将其添加到 public/index。html:
<base href="/" />
这应该可以解决问题..
可能你指错了
<script src="utils.js"></script> // NOT ok. Refused to execute script..MIME
<script src="js/utils.js"></script> // OK
另一个可能导致此问题的原因是 contentBase
属性 设置不正确。这对我们来说是因为我们正在请求一个 JS 文件但是得到一个 404 和 404 "page" 由 webpack-dev-server 返回为 text/html
.
我遇到了完全相同的错误,发现我需要更改
中的脚本
index.html
来自
<script src="App.js"></script>
到
<script src="/App.js"></script>
所以如果你有一个“.”或者文件前面没有任何内容,只需将其替换为“/”。希望这对您或其他人有所帮助。
在我的例子中,我遇到了这个问题,因为构建过程实际上并没有构建 JavaScript 包。
构建只是发出警告而不是错误 (!),因此只有在将构建推送到分阶段部署环境时才发现此问题。
因此,为了解决这个问题,我解决了未构建捆绑包的问题。
好的,如果有人来这里寻求可能的解决方案,我会为我的情况找到另一个解决方案。将 --no-module
标志添加到您的 npm 脚本。我的问题出在生产版本上,所以在我的情况下 package.json
;
"build": "vue-cli-service build --no-module",
我正在尝试设置 React 路由,当我在我的网站上单击某些内容时该路由有效,但是如果我打开一个新选项卡并复制它 url。我得到
Refused to execute script from 'http://localhost:8080/something/index_bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
webpack.config
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: /\.s?css$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
historyApiFallback:{
index:'/dist/index.html'
},
}
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'
import AppContainer from './components/App';
const browserHistory = createBrowserHistory();
import stores from '../src/stores/Stores';
const history = syncHistoryWithStore(browserHistory, stores.routingStore);
ReactDOM.render(
<Provider {... stores}>
<Router history={history}>
<AppContainer />
</Router>
</Provider>,
document.getElementById('app')
);
店铺
import {RouterStore} from 'mobx-react-router';
const routingStore = new RouterStore();
const stores = {
routingStore
}
export default stores;
我也试过了historyApiFallback: true
您的 webpack 配置格式不正确。 所以你的 devServer 返回后备 html 文件而不是包。
因此脚本使用 ('text/html') MIME 类型提供。
devServer: {
historyApiFallback:{
index:'/dist/index.html'
},
}
你的意思可能是这样的:
devServer: {
historyApiFallback: true
}
我最近不得不将以下内容添加到 headers 作为安全审计决议的一部分
X-Content-Type-Options: nosniff
之后我开始收到这些错误。我还没有找到一个永久的解决方案。这些页面似乎正在工作。控制台的噪音真烦人!
只需通过编辑以下内容来编辑 webpack 配置:
devServer: {
historyApiFallback: true
}
并将其添加到 public/index。html:
<base href="/" />
这应该可以解决问题..
可能你指错了
<script src="utils.js"></script> // NOT ok. Refused to execute script..MIME
<script src="js/utils.js"></script> // OK
另一个可能导致此问题的原因是 contentBase
属性 设置不正确。这对我们来说是因为我们正在请求一个 JS 文件但是得到一个 404 和 404 "page" 由 webpack-dev-server 返回为 text/html
.
我遇到了完全相同的错误,发现我需要更改
中的脚本index.html
来自
<script src="App.js"></script>
到
<script src="/App.js"></script>
所以如果你有一个“.”或者文件前面没有任何内容,只需将其替换为“/”。希望这对您或其他人有所帮助。
在我的例子中,我遇到了这个问题,因为构建过程实际上并没有构建 JavaScript 包。
构建只是发出警告而不是错误 (!),因此只有在将构建推送到分阶段部署环境时才发现此问题。
因此,为了解决这个问题,我解决了未构建捆绑包的问题。
好的,如果有人来这里寻求可能的解决方案,我会为我的情况找到另一个解决方案。将 --no-module
标志添加到您的 npm 脚本。我的问题出在生产版本上,所以在我的情况下 package.json
;
"build": "vue-cli-service build --no-module",