Wiring up MERN App + GraphQL communication via HTTPS

September 27, 2019 91 views
Nginx

Hi guys,

I have a MERN app running via docker-compose on Ubuntu 18.04. I’m also using Nginx as a server, and I’ve added SSL to my project now via Certbot.

I have an issue now since I’ve added SSL. Whenever I have communication between my client and server I get this message:

Mixed Content: The page at 'https://luckynote.io/login' was loaded over HTTPS, but requested an insecure resource 'http://luckynote.io:4000/graphql'. This request has been blocked; the content must be served over HTTPS.

Any idea how to get around this?

Cheers,

Ivan

1 Answer

Hello, @ivanssardelic

You can check your code if your domain is hardcoded with http somewhere, e.g http://luckynote.io

This can be anywhere, for example in your configuration file or in any other file part of your application. You can ssh to your server and use grep to search for any references of the domain name:

grep -irl "http://luckynote.io *

You need to check your database as well, because the domain name can be stored in some table/row with http, so you can search in the database as well. I don’t know if you’re running MySQL or MariaDB, but if you have phpMyAdmin installed, you can search for http://luckynote.io in every table in your database and update those to https instead.

I hope this helps.

  • @ageorgiev thanks for the reply!

    I solved the issue. So essentially Nginx set up HTTPS communication from the client to the React app on the frontend, which is cool. However, when the frontend app (running on HTTPS), tries to communicate with the backend server (running on HTTP), the communication breaks down.

    Based on the environment, I create either an HTTP (development) or HTTPS (production) server. So in production, I have all communication going through HTTPS, which as I have understood from multiple articles is probably the best practice, and also resolves this issue.

    Thanks for the reply once again!

    Cheers,

    Ivan

    • I’m glad you were able to solve this! Having all the communication going through HTTPS is also a lot more secure and it’s considered as best practice indeed!

Have another answer? Share your knowledge.