由于 MIME 类型不匹配，react.js 与 webpack 资源被阻止 [英] react.js with webpack Resource blocked due to MIME type mismatch

问题描述

使用 webpack 开发 React 应用程序，在我的 app.js 路由器中，当我将路由指定为/foo 时，组件正常呈现，但是当我将路由指定为/foo/bar 时，我收到以下错误"来自http://localhost:9000/foo/bar/bundle.js 的资源"由于 MIME 类型(text/html")不匹配(X-Content-Type-Options:nosniff)而被阻止"

App.js

function App() {返回 (<div className="应用程序"><浏览器路由器><路由器历史={历史}><开关><路由精确路径="/api/login" component={Login}/>//给出错误<路由精确路径="/login" component={Login}/>//正常渲染<路由组件={Error}/></开关></路由器></BrowserRouter>

);}

Webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');模块.出口 = {条目:path.resolve(__dirname, 'src/index'),输出:{路径:path.resolve(__dirname, 'dist'),文件名:'bundle.js',},模块:{规则: [{测试:/\.(js|jsx)$/,排除:/node_modules/，用: [{loader: 'babel-loader',选项: {预设:['@babel/react']}}]},{测试:/\.css$/,排除:/node_modules/，用:[{加载器:'样式加载器'}，{加载器:'css-加载器'}]},]},开发服务器:{contentBase: path.resolve(__dirname, 'dist'),端口:9000，historyApiFallback: 真},插件:[新的 HtmlWebpackPlugin({模板:src/index.html"})]};

解决方案

我遇到了同样的问题，并通过在 output 中添加 publicPath: '/dist/' 解决了它webpack.config.js 中 module.exports 的 code> 选项.

Developing a react app with webpack, in my app.js router when i specify the route to be /foo the component renders normally but when i specify a route as /foo/bar i get the following error "The resource from "http://localhost:9000/foo/bar/bundle.js" was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)"

App.js

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Router history={history}>
                    <Switch>
                        <Route exact path="/api/login" component={Login} /> //gives error
                        <Route exact path="/login" component={Login} /> //renders normally
                        <Route component={Error} />
                    </Switch>
                </Router>
            </BrowserRouter>
        </div>
    );
}

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: path.resolve(__dirname, 'src/index'),
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/react']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use:[
                    {loader: 'style-loader'},
                    {loader: 'css-loader'}
                ]               
            },]
    },
    devServer:{
        contentBase: path.resolve(__dirname, 'dist'),
        port: 9000,
        historyApiFallback: true
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "src/index.html"
        })
    ]
};

解决方案

I was facing the same issue and solved it by adding publicPath: '/dist/' in the output option of module.exports in webpack.config.js.

这篇关于由于 MIME 类型不匹配，react.js 与 webpack 资源被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！