更新

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

另请参阅此问题：How to deploy node that uses Webpack to 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，如上所示

添加此脚本而不是postinstall

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

现在它按预期工作

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

加载bundle.js时出现React混合内容错误（Http / Https）

1 个答案:

更新