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).
Related
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.
I have my java spring project running successfully on AWS EC2 instance uploaded via elastic bean stalk but its endpoint is of the form http://...........
Now i have uploaded my angular project on firebase.
I could have uploaded it on AWS itself but it requires geolocation() which requires HTTPS connection. when i connect my angular app to aws instance via endpoint it shows
Mixed Content: The page at 'https://aspertime-a3b60.firebaseapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://aspertime-env.x2enfd8jmj.ap-south1.elasticbeanstalk.com/employee/login?username=123&password=123'. This request has been blocked; the content must be served over HTTPS.
i have tried many times to solve this problem.
-
So as we discussed in the comment, follow these steps
Create a Certificate from AWS ACM
Verify the certificate by adding an entry to your DNS provider
Create Load balancer with https listener
Place Load balancer on the top of Elastic beanstalk
Update web-app to point New TLS endpoint
My current stack is pretty simple:
Backend: Django 2.1.1, python 3.6 I am running it on elastic beanstalk with an application load balancer. I have port 80 listening for HTTP and port 443 listenin for HTTPS with my ssl certificate selected. I did not select an SSL policy as I have no idea what these do.
Frontend: React, mainly using axios to do requests (axios.get, axios.put, etc). I have this hosted on two s3 buckets, mainsite.com, where all my static files are, and www.mainsite.com, which redirects HTTP to that site. I also have 2 cloudfront distributions which redirect HTTP to HTTPs, using the same certificate as the one I used for my load balancer. I then created 2 record sets and set the alias to the cloud distribution. When I try to do any request, I see in the console:
xhr.js:173 Mixed Content:
The page at 'https://fakesite.net/login'
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://myenv-env.randomletters.us-east-1.elasticbeanstalk.com/rest-auth/login/'.
This request has been blocked; the content must be served over HTTPS.
What else do I need to configure? Do I need to change code, or is it all aws related.
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)
I have developed a reactjs app with .net core web API as backend. I have hosted the app on windows server on IIS with http which was working perfectly without any issue but when I tried to host the same using a wild card SSL certificate it gives this error in console of the chrome :
"Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR".
error
I have also done some configuration regarding nginx on server as well which was described in some URL.
You can deploy your reactJS application in using AWS CloudFront, and can use route 53 to redirect AWS Cloudfront url to your domain. SSL can also be easily configured once this is done