个人中心
gpt4 book ai didi

javascript - 加载bundle.js(Http/Https)时发生混合内容错误

转载 作者：行者123 更新时间：2023-12-03 02:40:43 25 4
gpt4 key购买 nike

尝试使用 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"
  }
}

我的索引.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天的时间来解决它。 :(

最佳答案

您是否尝试过将 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，如上所示
  • 添加此脚本而不是安装后脚本
"scripts": {
    "heroku-postbuild": "webpack"
}

现在它按预期工作了

对应的合并( https://github.com/tanmoysarkar/shoppingApp/commit/99b7d5a58928a87b79aa8f3e73d77f0ca6e0aa49 )

关于javascript - 加载bundle.js(Http/Https)时发生混合内容错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48336438/

25 4 0
文章推荐： javascript - ui-grid 突出显示某些特定行
文章推荐： Firebase + flutter : get platform user used to sign in
文章推荐： firebase - 可调用的云函数错误 : Response is missing data field
文章推荐： javascript - 错误 Eslint : terminated with error timeout in Brackets
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com