I have a flask app hosted via AWS ECS which has an amazon generated url so I can’t request an SSL certificate for it. I have a next js frontend hosted on vercel that cannot handle insecure requests. What are my options? I can obviously buy a domain and request an SSL certificate but if possible, I don’t want to spend anything. Is there any way I can make a HTTP request to my backend? When I do, I get this error
This request has been blocked; the content must be served over HTTPS.
I’ve tried using rewrites in next.config.js but it doesn’t seem to work.
Do I have any other options?
2
Answers
The ECS service is using an Amazon URL because it’s running behind a load balancer. You can call that URL using HTTPS if you have a listener configured on the port 443 pointing to your service.
This will work only if the nextjs application in Vercel is the only one calling the API.
If the browser needs to make calls to the API, you won’t have access to authentication cookies and you will need to add the proper CORS headers to deal with the browser doing requests to a different domain.
This is a limitation imposed by the web browser that is running your frontend application. Web browsers will not allow applications loaded over HTTPS to make insecure HTTP calls to backend services. The only way to resolve this issue is to configure an SSL certificate for your backend so the browser can communicate with it over HTTPS.
You will have to purchase a domain name, and then generate a free SSL certificate in AWS ACM for that domain name. Then you will need to have a load balancer in front of the ECS service, and configure an HTTPS listener on port
443
of that load balancer, with the SSL certificate from AWS ACM. Finally you will need to create a DNS record in your domain that points to the load balancer.Then your frontend application will be able to make API calls to your backend application (using the domain name) over HTTPS.