Getting mixed active content error after adding SSL to my website - reactjs

I have a https frontend which is making requests to the backend. After adding ssl certificate my requests are getting blocked. I cannot make my backend api https. What should i do?
FYI:
The frontend server is react, the backend is express and i am running nginx.

In order to make https requests to the backend server, i just set it as a subdomain and it all worked.

Related

How my mern web application is sending https request instead of http request in localhost

I am building a blog website using mern stack, I have setup the frontend and backend in the same domain in localhost. I have use axios for sending request from the frontend, all the thing works well but some of my request are coming with https protocol whereas I have not setup my application for https. due to this reason I am not able to communicate to my backend. How to solve this issue, can anyone help on this.
The image is not loading as it sends https request but I didn't set up for https.
<img src={`/${postInfo.cover}`} /> code for image tag

request hitting from frontend is not reaching backend deployed in EC2

Im trying to hit an api to custom subdomain(api.example.com) for analytics to the backend.
It is working fine in localhost but in hosted environment the api is giving cors error.
I guess its the issue with hostedzone configuration.
As of now backend is not at all connected to the frontend.
need help.
this is the domain where my backend is hosted(http://54.95.135.232:8080)
ive tried mapping this url to the subdomain in godaddy so that once i hit the subdomain(api.example.com) it will redirect to the backend hosted port.
but its not at all working.

Firebase App with Cloud functions Cookie not being set on firebase hosting

Have a firebase app (server side React) that receives a http only cookie from a firebase functions Rest API as part of the response. This works fine on localhost but when i publish to firebase hosting no cookie is received. I'm thinking its either because the FB hosting is https or it is CORS related that the cookie is not being set.
Insight and how to fix would be helpful.
Cheers

how to serve a content over https

I am facing problem when I call an api end point url from a https page. I have hosted my front-end code in aws s3 bucket and a third party ssl certificate is deployed .so my react code is served over https. And my back-end is deployed inside a single instance application of elastic bean stalk. while I am trying to call my back-end url from my front-end application, it is throwing the below error.
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
Can anyone help me to resolve this issue.
Thanks.
You need to setup your ELB (AWS Elastic Beanstalk) application to use SSL/HTTPS
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html
You can set this up with Route53 and AWS Certificate Manager (ACM).

How to query API from within HTTPS encrypted ReactJS page?

In an effort to move a web platform to HTTPS, I ran into a problem. Here is the setup that I am using:
Python Flask-based http server is served by gunicorn
Nginx directs SSL-encrypted HTTPS traffic to the http server
The http server serves a ReactJS page
Independent Python Flask-based API server is served by gunicorn
Now I am making PUT and GET requests from the ReactJS page into the API server. Because the ReactJS page is proxied via HTTPS, of course any request is fully encrypted. Thus, the API server receives encrypted requests.
My question is, how can I query an API server from within an HTTPS ReactJS page?
If I got it right question is "how to override browser security that blocks me from sending requests by http:// from within page hosted at https://".
The answer is: no way to do that.
If it is not possible to enable SSL for API server you may use your own server act as secure proxy. So finally it'd look like ReactJS -> HTTPS -> your server -> HTTP -> API server
UPD similar case sending request from https to http from chrome extension (spoiler: no workarounds available)

Resources