React webapp keep loading local host resources in PROD env

Question

I've deployed my react-js based web app to prod environment, and from the browser console, I can see there's some dependency code stuck in an endless loop trying to load some socketjs-node resources from local host through xhr. Here's the message I got from browser console:

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

I am wondering if I missed any prod setting when building my js bundle. I am using webpack and here's the setting for compiling 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')
    }]
  }
};

and here are the dependencies I am using:

  "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"
  }

I don't see abstract-xhr.js is checking any explicit flag when initiating this query. Please share some thoughts. Thanks!

Answer 1

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

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