Mixed Content Type error with Gatsby (related to HTTPS and HTTP)

There is an error that shows up with “netlify dev --live” when deploying a gatsby site locally. The error seems to be about there being some connection in the Gatsby build that is http, instead of https.

When you open the locally served link that netlify generates, you get a Mixed Content Type error logging continuously in the console.

It might seem like this could be ignored, since it only is happening on the locally served project, and not with the deployed repo. However, I’ve also gotten this error sometimes on the deployed site (and can not detect what at all I could have been doing differently that caused a repo to error remotely vs. not error) and it broke the deployed site.

I was starting a Gatsby project yesterday, when the error broke the site and I could not get it to go away, so started over from scratch.

So, I want to post this here, and am hoping someone can explain why it is happening, and how a user can make sure it doesn’t happen.

Site name, where am reproducing the error:
https://gatsby-reproduce-error.netlify.app/

Issue filed on gatsby:

Detailed log of how I remember the error happening. And what happened when tried to reproduce the error:

The first time I got the error, it was after adding a SaSS library. When I tried to recreate the error, however, I got different result.

Review of what caused error the first time:

  1. As I understand it, what happened the first time I got the error and it broke the site online:
    • clone repo.
    • remove git.
    • create new git and add link it to my gitHub account.
    • deploy to netlify via the netlify-cli.
    • Everything is fine.
    • Add the sass plugins. (don’t even change the .css files or put the plugins in the gatsb-config.js). The site starts erroring.
    • Suddenly get errors.
    • The errors don’t go away, even if you
      • remove the dependencies
      • remove package-lock and node_modules
      • reset the gitHub
    • The site works perfectly fine locally,
      • but for any deployed netlify (which requires all requests to be HTTPS), it errors.

Steps to reproduce error:

  1. cloned repo. And removed the .git folder.

  2. init git and add/commit all files

  3. run gatsby develop (forgot to do npm install, but it did it for me)

  4. site is running on localhost: 8000

    • The only console.logs are:
    • [HMR] connected
    • [Intervention] An element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
  5. Connect site to GitHub/ put on GitHub repo

  6. Run “netlify init” to start deploying

    • deploy site manually in terminal
    • build command: gatsby build
    • publish repo: public
  7. Everythig is deployed. no errors.

  • the only console log in deployed site is: [Intervention] An element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
  1. Run “netlivy dev --live”

    • to get a localhost
    • and a temporary deployed url being served from my computer
  2. The localhost is running fine,

  3. The local deployed url: https://gatsby-reproduce-error-3e8071.netlify.live/ now is showing the errors.

  • Before, these errors didn’t show up until I installed the sass dependencies listed in the docs.
  • Now, they are showing up right away, for some reason
  • ERROR: (keeps showing up/ has dozens of repeated error)
polling-xhr.js:268 Mixed Content: The page at 'https://gatsby-reproduce-error-3e8071.netlify.live/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://gatsby-reproduce-error-3e8071.netlify.live:61317/socket.io/?EIO=3&transport=polling&t=NCzNlEQ'. This request has been blocked; the content must be served over HTTPS.

  1. Since am getting error on local deploy before deploy to netlify site, will push the deploy now (before adding the SaSS dependencies)

In deploy logs:
❯ Config file
6:24:04 AM: No config file was defined: using default values.

  1. There is no error in the console on the deployed site

  2. Locally, run “netlify dev --live” to create another locally deployed link

  3. localhost:8000 has no erro

  4. The deployed local link is still getting the error about mixed content/ http

  5. install dependencies: npm install --save node-sass gatsby-plugin-sass (per docs)

  6. deployed to netlify. While it builds, testing locally

  7. deployed local link getting same errors. Site on netlify server, not getting errors

  8. added SaSS plugin to gatsby config.

  9. deployed local link getting same errors. Site on netlify server, not getting errors

  10. changed .css file to .scss and updated import to .scss in the layout component

  11. Error is not in deployed this time. I don’t know why. (Am nervous that it could just show up again for some unknown reason).

Overview of current Status, after trying to reproduce error:

  1. Mixed content type error shows up on local deploy (with netlify dev --live)
  2. Error shows immediately, before adding any dependencies or libraries.

Error:

ERROR:   polling-xhr.js:268 Mixed Content: The page at 'https://gatsby-site-name.netlify.live/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://gatsby-site-name-3e8071.netlify.live:61317/socket.io/?EIO=3&transport=polling&t=NCzNlEQ'. This request has been blocked; the content must be served over HTTPS.


  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

Hi @maiya,

Thanks for the very thorough post! I do suspect that the issue is related to:
https://github.com/gatsbyjs/gatsby/issues/24864 and https://github.com/gatsbyjs/gatsby/issues/25570.

I say this because the url being requested is originating from Gatsby:
http://gatsby-site-name-3e8071.netlify.live:61317/socket.io/?EIO=3&transport=polling&t=NCzNlEQ.

There is no reference to socket.io in the cli and the url that fails is invoked in the polling-xhr.js file, which is also not a file that exists in the cli.

Do you happen to know if you are using a gatsby plugin that runs the polling-xhr.js file?

Hi Dennis,
Thanks for replying!
The error doesn’t show up when you just do development using localhost; and it doesn’t seem to show up anymore when you deploy the site to netlify. It’s only showing up when you do the netlify live server.

I don’t know if there’s a polling-xhr.js file. This is the repo for the code that I was using:

https://github.com/gatsbyjs/gatsby-starter-default

I opened an issue on Gatsby here (https://github.com/gatsbyjs/gatsby/issues/25695), and one user was saying they thought it was a netlify build thing.

I’ll post this link there too, so maybe their devs can look at it.

1 Like