I've successfully purchased SSL from Namecheap and set up SSL manually for Heroku, but navigating to the HTTPS url instead of HTTP doesn't work. I'm not sure what the next steps are. Does this need to be handled in both React and Express?
Related
I'm using React for the front end and express for the back end, I deployed my front end to cPanel and got SSL certificate.
but the express app runs on http://ip:port and not on a domain with https URL which means I cant send requests from the front end to non SSL IP's.
how I can get SSL certificate or secure the backend app? and also how i change the express app to https:// instead of http, with the https node module? or there is another, better way?
and how i can connect the ip to a domain name, like "api.mydomain.com" or even set it to run on "mydomain.com/api" (way better if possible)..
thanks!
Everything worked fine. But after after adding the SSL certificate to the frontend, requests are not sent to the backend. Backend has SSL certificate as well. Any ideas how I can fix it? Also added a forced use https.
In browser console I get: xhr.js:177 POST 188.221.82.95:3001/submitVideo/storageSize net::ERR_CONNECTION_CLOSE
So I deployed a React/Node JS app to Heroku. I then set my domain to my custom google domain using this tutorial: https://medium.com/#david.gagne/set-up-a-custom-domain-for-your-heroku-application-using-google-domains-guaranteed-a2b2ff934f97. When I go to my site it says "Not Secure" next to my address. I see I have an SSL certificate and enabled it here:
In Forward settings and also set my Forward To URL to https://www.myWebsite.com
What else do I need to do for my site to become secure?
For the site to be secure you need to upload an SSL certificate on Heroku or use ACM.
Please consider my circumstance:
I have created a backend API on port 8880 in Express.js in HTTP
I have created a frontend website in Next.js on port 80, also in HTTP.
I signup with cloudflare they manage my DNS, I get their SSL so my frontend HTTP site becomes HTTPS.
After successfully applying SSL to the frontend, the backend api stops receiving the POST request from login from the frontend.
As a result, I can no longer login to my site because every attempt fails when the POST request attempts to send the JSON payload of the login. How can I fix this SSL brokenness? This worked perfectly fine as HTTP to HTTP. But now, as HTTPS to HTTP, got failure.
Here is what I have tried to solve:
HTTPS to HTTPS - this failed. I tried changing the backend to HTTPS but used a self-signed certificate following this instruction.
My code in app.js (backend):
https.createServer({
key: fs.readFileSync('server.key'),
cert: fs.readFileSync('server.cert')
}, app)
.listen(port, function () {
console.log(`Connected on port ${port}`)
})
Set up my Cloudflare Page Rules - Apparently cloudflare has "Page Rules" settings for your domain so I set mine to domainname.com/api SSL: Flexible. Still failed. Testing in Postman showed I was successfully signing in with https://123.456.789.10:8880/api/signin but not with https://domainname.com/api. I enabled morgan on Express and saw no ping on the /api/signin endpoint.
Switching the backend from HTTPS to HTTP, leaving Page Rules on SSL Flexible - As per this answered question here, I was thinking this will surely work since Cloudflare says "The Flexible SSL option allows a secure HTTPS connection between your visitor and Cloudflare, but forces Cloudflare to connect to your origin web server over unencrypted HTTP. An SSL certificate is not required on your origin web server and your visitors will still see the site as being HTTPS enabled." Doing this also failed.
And so, I am still unable to reach /api/signin either on domainname.com/api/signin or https://123.456.789.10:8880/api/signin or http://123.456.789.10:8880/api/signin. Morgan shows nothing in the console when I attempt signin, whereas it did before.
SOMEBODY out there must have solved setting up a frontend and backend on one IP but two different ports and gotten it to work with cloudflare SSL before. Please help!
I was able to solve this by implementing NGINX and setting the config to take / and /api and make them route to the respective apps running their port numbers. Additionally, I had to set up cors in my Express backend and used dotenv to allow a .env file to persist the FRONTEND_APP environment variable containing the ip address of the frontend Next.js app.
I made a react add with node backend using the stripe express checkout form, and passing the source and other data to the backend to subscribe users, but on production it does not work.
I have it on an ubunutu vps, and the app is served with nginx as a reverse proxy of localhost. but it is not working, i also added ssl certificate to the domain but I am getting an error now that says:
Blocked loading mixed active content “http://localhost:8080/api”
on the server version in stripe test mode.
how can this be fixed?
In production it is required that you use SSL with Stripe. Your error is because you are trying to load or access http://localhost:8080/api from an originally https page. Stripe requires that all of your resources are loaded via https/SSL.
You also probably shouldn't be loading localhost in production. You should be using your actual hostname in production with https.
Let's say you load https://example.com/ in your browser. And you want to make a call to your backend server that is running on https://example.com/api. Instead of specifying localhost you can just change the URL to be /api and that will automatically append the domain name https://example.com to the request. This only works for the same domains. If it's separate domains you have to specify the domain name in your request.