相关疑难解决方法(0)

我使用Webpack bundler和Webpack dev服务器进行本地开发.前端位于React.js + Redux中,后端位于Node.js和koajs中.

在后端,我使用passportjs库进行用户身份验证,其他库koa-passport,passport-facebook,passport-google-auth通过Facebook或Google进行身份验证.基本上,我实施了koa-passport-example.

如果我的应用程序想要将用户重定向到Facebook或Google登录页面,Webpack dev服务器会抛出错误:

GET http://localhost:8090/auth/bundle.js net::ERR_ABORTED

Refused to execute script from 'http://localhost:8090/auth/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

如果我通过Webpack生成bundle并将其托管在Node.js服务器上,我不会收到此错误.我需要找出如何设置Webpack开发服务器以摆脱此错误消息.

的package.json

    "scripts": {
    "debug": "./node_modules/nodemon/bin/nodemon.js --inspect ./script/server.js",
    "webpack": "npm run serve | npm run dev",
    "start": "node ./script/server.js",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --hot --inline",
  },
        "dependencies": {
        "@koa/cors": "^2.2.1",
        "actions": …

上下文：使用 webpack 4 尝试 RR4 (devServer: {apiHistoryFallback: true} Webpack 4 配置示例

http://localhost:8080/reports在剪切并粘贴到地址栏时有效（又名历史回退正在工作），我可以单击 /reports/8 的链接，因为我已在 /reports 处添加了到组件的嵌套路由

<Route path=${match.path}/:reportId component={ReportDetail}/>

但是将http://localhost:8080/reports/9剪切并粘贴到地址栏中，我得到一个空白屏幕和一个： Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 尝试为 devServer 设置 contentBase 但这并没有解决问题。

此功能在 Webpack 3 和 RR3 中运行良好。不确定是否要吠叫 Webpack 或 React Router 树。

与此类似的问题，但针对 Webpack 3