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
Have a project in mind?
Websites. Graphics. SEO-oriented content.
I can get your next project off the ground.
See how I have helped my clients.