1

I'm building a SPA with React and Webpack, and use Firebase for storage and hosting. I just tried to deploy it, though it is not jet finished. First, I get a lot of errors in the console:

Mixed Content: The page at 'https://plump.firebaseapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:8080/sockjs-node/info?t=1463392450338'. This request has been blocked; the content must be served over HTTPS.

I understand that it is wrong that it requests from localhost, but I do not know how to fix that. I also do not understand what exactly is not served over https.

Also, when I do some changes and deploy again, the deployed version is not updated. I found this question on SO and it appears that I have the same problem.

Here is my webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'react-hot!babel'
        }]
    },
    resolve: {
        extensions: ['', '.js']
    },
    output: {
        path: './dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '578503765660056',
          xfbml      : true,
          version    : 'v2.5'
        });
      };
      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/swe_sv/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
      <div id="app"></div>
      <script src="bundle.js"></script>
  </body>
</html>
Community
  • 1
  • 1
hellogoodnight
  • 1,989
  • 7
  • 29
  • 57
  • First part of question: change `https://cdn.firebase.com/js/client/2.4.2/firebase.js` to `//cdn.firebase.com/js/client/2.4.2/firebase.js` (same with jquery) – Bob Sponge May 16 '16 at 10:52
  • @BobSponge I still get the same error. – hellogoodnight May 16 '16 at 10:58
  • I know this is an old question, but here it goes: The problem that you're currently experiencing is probably because you're trying to load a website from https and are trying to get some resource from http. If you're trying to get something from Localhost, while serving something from a secured location, you need to install a self-signed certificate in localhost in order to make it https: https://stackoverflow.com/questions/21397809/create-a-trusted-self-signed-ssl-cert-for-localhost-for-use-with-express-node – Jose A Apr 02 '18 at 04:18

0 Answers0