Guide to putting Strapi behind HTTPS/SSL

In order to put Strapi behind a HTTPS, you need to take some steps.

This is mostly for my notes but if you need more info, please email me.

Why put Strapi behind HTTPS?

If your frontend is behind a HTTPS, it will reject content from a HTTP link, which by default Strapi uses.

That’s to say: http://URL:1337.

Server will throw “mixed-content” error and reject the content.

What server config?

I ran this on AWS Lightsail’s Node JS bitnami installation. It’s Debian and has an apache server.

What I did

In Strapi

In your strapi folder, go to config/server.js, add the bold line in to it. Replace YOUR_URL with your website’s URL.

module.exports = ({ env }) => ({

  host: env("HOST", "0.0.0.0"),

  port: env.int("PORT", 1337),

  url: "https://YOUR_URL.com/api",

  admin: {

    auth: {

      xxx: env("xxx", "???"),

    },

  },

});

Go to your vhosts folder to set up a proxy. You want to send any queries to YOUR_URL/api to localhost:1337

On your front end

My front end was made with Next.JS, so I had a ENV config.

Here’s my code:

module.exports = {
  reactStrictMode: true,
  env: {
    apiUrl: "https://YOUR_URL.com/api",
    url: "https://YOUR_URL.com",
  },
  images: {
    domains: ["YOUR_URL.com"],
  },
};

API_URL is meant for NextJS to query and get some data through a useEffect hook. url is meant for Next SEO.

On your server

In your server, go to the folder /opt/bitnami/apache/conf/vhosts

Take both your vhosts.conf files, in my case, named sample-https-vhost.conf and sample-vhost.conf

Add these lines just before the </VirtualHost> line

 <Location /api>
            ProxyPass http://127.0.0.1:1337  retry=0 timeout=60 keepalive=On
            ProxyPassReverse http://127.0.0.1:1337
  </Location>

Are you getting malicious path error?

Error response from Strapi upon heading to YOUR_URL/api:

{
    statusCode: 400,
    error: "Bad Request",
    message: "Malicious Path"
}

Check if your server.js, front-end api URL or your vhost ProxyPass have a slash at the end. You don’t want that slash.

This would cause Strapi to query with two slashes: YOUR_URL/api//content

For example, I put

ProxyPass http://127.0.0.1:1337/ <– error because of extra slash