加載bundle.js（Http / Https）時反應混合內容錯誤

Question

嘗試使用React，但在heroku上投放時出錯。 而它一直在我的本地工作。

//錯誤

混合內容：“ https://reactshoppingapp.herokuapp.com/ ”上的頁面已通過HTTPS加載，但請求了不安全的腳本“ http：// localhost：3000 / bundle.js ”。 該請求已被阻止； 內容必須通過HTTPS提供。

我的github個人資料（如果可以克隆它並解決我的錯誤）。 https://github.com/tanmoysarkar/shoppingApp.git

我的Package.json

{
  "name": "website",
  "version": "1.0.0",
  "engines": {
    "node": "7.2.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.18.2",
    "bootstrap": "^3.3.7",
    "chai": "^4.1.2",
    "connect": "^3.6.5",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^2.0.1",
    "cookie-parser": "^1.4.3",
    "cookieparser": "^0.1.0",
    "cors": "^2.8.4",
    "css-loader": "^0.28.8",
    "es2015": "0.0.0",
    "express": "^4.16.2",
    "express-session": "^1.15.6",
    "express-validator": "^4.3.0",
    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.13.9",
    "morgan": "^1.9.0",
    "nodemon": "^1.14.7",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^3.1.3",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.0",
    "serve-favicon": "^2.4.5",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0",
    "webpack-hot-middleware": "^2.21.0"
  },
  "scripts": {
    "start": "node server.js",
    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --history-api-fallback --host 0.0.0.0 --port 3000",
    "build": "react-scripts build",
    "test2": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "postinstall": "npm run build",
    "webpack": "webpack"
  }
}

我的Index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <meta name="description" content="My First Website">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <title>Shopping Cart</title>

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

      <script type="text/javascript" src = "http://localhost:3000/bundle.js"></script>
      <script src="js/jquery.js"></script>
      <!-- End -->

      <!-- Plugin JS -->
      <script src="js/bootstrap.js"></script><!--bootstrap-->      

  </body>
</html>

webpack.config.js

var webpack = require('webpack');
module.exports = {
  devtool: 'source-map',
  entry:  [  
       'webpack-dev-server/client?http://0.0.0.0:3000',
    'webpack-hot-middleware/client','./src/index.js'
  ],

  output: {
   path: __dirname + "/build",
   filename: 'bundle.js',
  },


  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", 
        query:
          {
            presets:['es2015', 'stage-0','react']
          }
      },
      {
        test: ['./src/css/bootstrap.min.css'],
        use: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        // Transform our own .css files with PostCSS and CSS-modules
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],

      }, {

        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
       {
          test: /\.html$/,
          loader: "file-loader",
        },
        {
          test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: "url-loader"
        },
        {
          test: /\.(ttf|eot|svg|jpg|png)(\?[\s\S]+)?$/,
          use: 'file-loader'
        }
    ],

  },

//This config only to be used when components interact with models directly
 devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
  },

    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
  ]
};

對此的任何幫助將是巨大的。 已經浪費了2天來解決它。 :(

Answer 1

您是否嘗試過將javascript src路徑更改為相對路徑？

<body>
...
    <script type="text/javascript" src = "/bundle.js"></script>
...
</body>

為此，您必須將腳本添加到package.json中

"scripts": {
    "heroku-postbuild": "webpack -p --config ./webpack.config.js --progress"
}

另請參閱以下問題：如何將使用Webpack的節點部署到heroku

以及相應的文檔： https : //devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

更新：

我們對他的文件進行了一些更改：

在webpack.config.js中添加以下行：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

將src更改為/bundle.js，如上所示

添加此腳本而不是安裝后

"scripts": {
    "heroku-postbuild": "webpack"
}

現在它按預期工作

相應的合並（ https://github.com/tanmoysarkar/shoppingApp/commit/99b7d5a58928a87b79aa8f3e73d77f0ca6e0aa49 ）

加載bundle.js（Http / Https）時反應混合內容錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2018-01-19 08:29:17

更新：

加載bundle.js（Http / Https）時反應混合內容錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2018-01-19 08:29:17

更新：

解決方案1
1 已采納 2018-01-19 08:29:17