Question

我已将基于react-js的web应用程序部署到prod环境，并且从浏览器控制台，我可以看到有一些依赖代码卡在无限循环中，试图从本地主机加载一些socketjs-node资源XHR。这是我从浏览器控制台获得的消息：

abstract-xhr.js:132 Mixed Content: The page at '[MY_WEBSITE_ADDRESS]' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/sockjs-node/info?t=1469401504944'. This request has been blocked; the content must be served over HTTPS.o._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21
abstract-xhr.js:132 XMLHttpRequest cannot load http://localhost:3000/sockjs-node/info?t=1469401504944. Failed to start loading.o._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21
client:70 [WDS] Disconnected!l.onclose @ client:70n.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:356

我想知道在构建我的js包时是否错过了任何prod设置。我正在使用webpack，这里是编译prod bundle js的设置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index',
    'whatwg-fetch'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

以下是我正在使用的依赖项：

  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.6.2",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "async": "^1.5.2",
    "express": "^4.13.4",
    "mixpanel": "^0.4.0",
    "mixpanel-browser": "^2.8.1",
    "radium": "^0.17.1",
    "react": "^0.14.6",
    "react-autosuggest": "^3.8.0",
    "react-bootstrap": "^0.29.4",
    "react-cookie": "^0.4.7",
    "react-dom": "^0.14.6",
    "react-ga": "^2.1.0",
    "react-geosuggest": "^1.23.0",
    "react-router": "^2.4.1",
    "whatwg-fetch": "^1.0.0"
  }

启动此查询时，我看不到abstract-xhr.js正在检查任何显式标志。请分享一些想法。谢谢！

Answer 1

我通过从webpack config中的Entry属性中删除此行来修复它。

'webpack-dev-server/client?http://localhost:3000',

React webapp继续在PROD环境中加载本地主机资源

1 个答案: