Solving the mixed content issue in netlify clients

How to solve communication between https clients and http servers

Sometimes when developing a demo application with a backend and a frontend, we don’t want to deal with SSL, permissions, CORS or proxys, we just want to code and iterate as fast as possible.

I had a recent experience where I deployed a dockerized NodeJS application on AWS, using ElasticBeanstalk and on the frontend side, I used netlify to deploy a static Preact app. So the problem was: Netlify only allows communication with certified and secure domains (which is a good thing), so when I made API requests to my unsecure server, I had a big fat error message on my Chrome console.

From there, I tried a lot of things! Created and self-signed SSL certificates using openssl, created configuration files for my ElasticBeanstalk instance,messed around security groups and even tried to make my Netlify application run on http (bad, bad practice, but I was desperate 😥).

In the end, I found a solution by reverse-proxying the calls in the client to the unsecure server. It works like this:

• Declare a netlify.toml file in you client project. It will hold the redirect configuration, which is something like this:

  [[redirects]]
    from = "/api/*"
    to = "http:myunsafeapi/:splat"
    status = 200
    force = true

In the code above, I’m redirecting all the client calls made with /api/ to my unsafe server. This will make the Netlify CDN redirect the call to our API endpoint and done!

Now, probably you have something like this in your axios configurations:

  const client = axios.create({
    baseURL: process.env.API_URL,
  });

Since the API_URL is comming from a environment variable, you have to change this variable in your staging environment to be /api/, so our redirect configuration can take effect! In your local .env file you can stay with your local API endpoint like http://localhost:3000/.

Anyway, not a beautiful solution I’m proud of doing 🙈, but again: for fast and demo application it just works. Saw this solution in this github discussion.

Now I’ll go study and learn more about SSL encryption, AWS deployement and hopefully discover a better way of making my servers a valid HTTPS, without having to buy a domain.