Reagieren webapp halten, laden lokale host-Ressourcen in env PROD

Habe ich eingesetzt, meine reagieren-js-basierten web-app prod-Umgebung, und aus der browser-Konsole, die ich sehen kann, gibt es einige dependency-code stecken in einer Endlosschleife und versuchen zu laden, einige socketjs-node Ressourcen vom lokalen Rechner über xhr. Hier die Meldung bekam ich von der browser-Konsole:

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

Frage ich mich, wenn ich verpasst prod Einstellung, wenn mit dem Bau meines js-bundle. Ich bin mit webpack und hier ist die Einstellung für das kompilieren 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')
    }]
  }
};

und hier sind die Abhängigkeiten die ich benutze:

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

Sehe ich nicht abstract-xhr.js ist die überprüfung eine explizite Flagge, wenn er diese Abfrage. Bitte teilen einige Gedanken. Danke!

  • Ich bin am überlegen ob es wegen dieser Zeile in Entry Eigenschaft von webpack Einstellungen: 'webpack-dev-server/client?http://localhost:3000',. Versucht jetzt…
  • OK, stellt sich heraus, das ist das Problem. Schließen nun die Frage.
InformationsquelleAutor Allan Jiang | 2016-07-24



One Reply
  1. 2

    Ich es behoben durch das entfernen dieser Zeile aus Entry Eigenschaft im webpack config.

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.