Hi I have a react application that runs on vercel so in https and the backend is on a vps, the backend has no https and when I run the rest calls from frontend to backend I have the following error how do I solve it?
Error:
xhr.js:220 Mixed Content: The page at 'https://vmgroupfrontend.vercel.app/#/login' was loaded over HTTPS, but requested an insecure
XMLHttpRequest endpoint 'http://myendpoint.org:3001/user/login'.
This request has been blocked; the content must be served over HTTPS.
Related
I need to deploy a simple react app just for showcase purposes. But there is a problem when I'm trying to host it on Netlify, Vercel, Firebase and I can't use heroku. I'm getting this.
Mixed Content: The page at 'https://ip-tracker-b72ffu8s0.vercel.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.ipstack.com/check?access_key=3a79079d875...'. This request has been blocked; the content must be served over HTTPS.
I would like to use https://api.ipstack.com/check instead of http://api.ipstack.com/check
but free plan do not allow me to use https.
The question is where I can deploy react-app on http? I don't care about safe connections. I just want to deploy as a demo.
The front-end app is built on ReactJs and development server is running on http://localhost:3000. The back-end API is built with Flask 2.0.2 and is running on http://localhost:5000
In app.py file, the CORS has been allowed as mentioned in the documentation like:
CORS(app, resources={r"*": {"origins": "*"}})
When I try to submit the login form I still get the following error:
if you Enables CORS on your backend api , it should work.
I don't think this is an issue with your react frontend application.
cors is a security measure put in by browsers.
You could bypass the Cross-Origin-Policy with chrome extension but it's not advisable -
Try this on your backend API:
Ensure you have flask cors installed
create a configuration dictionary like this
api_v1_cors_config = {
"origins": ["http://localhost:5000"]
}
You can then set a global cors for your app like this
CORS(app, resources={"/api/v1/*": api_v1_cors_config})
// this would allow all methods, origins
I just deployed my React app to Vercel, but it's not being able to send HTTP requests, I'm getting this error:
This request has been blocked; the content must be served over HTTPS
My backend is deployed on ECS with an HTTP endpoint, what could I do to solve this? I already tried to set a meta tag, but it didn't work.
I'm using google app engine to host both my frontend and my api backend. I'm getting the following errors when I'm polling the "slicingdone" route on my backend:
bootstrap e65cef5bb029055e1719:2 GET
https://playloopsbackend-217106.appspot.com/playloops/slicingdone 502
send # bootstrap e65cef5bb029055e1719:2
/videotogifs:1 Access to XMLHttpRequest at
'https://playloopsbackend-217106.appspot.com/playloops/slicingdone'
from origin 'https://playloopsfrontend.appspot.com' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on
the requested resource.
I poll the slicingdone function to figure out when trimming of a video on my backend is finished. It works locally but is presenting the above errors when deployed to gcloud.
slicingdone function on my backend looks like this(Express):
slicingdone(req, res, next) {
if(slicingIsDone == true){
res.status(200).send('true');
slicingIsDone = false;
}else{
res.status(200).send('false');
}
}
*Every other route on my backend works fine even when deployed. I have similar functions on the backend that manipulate videos using ffmpeg in different ways. I have whitelisted my frontend url on my backend, so I'm not sure why I'm getting these CORs errors. I store the video results in google cloud storage--perhaps I need to add my backend url to google cloud CORS whitelist?
Any help is much appreciated! Thank you!
I have a web site which is served over an https protocol. This is written in angularJs. The Website is calling an asp.net web api service over http, and then I'm getting this error:
angular.js:10765 Mixed Content: The page at 'https://example.com/forms/#/question-set-4#topOfThePage' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://webapiaddress/api/ControllerName/GenerateCaptcha'. This request has been blocked; the content must be served over HTTPS.(anonymous function) # angular.js:10765r # angular.js:10558g # angular.js:10268(anonymous function) # angular.js:14792$eval # angular.js:16052$digest # angular.js:15870$apply # angular.js:16160g # angular.js:10589T # angular.js:10787w.onload # angular.js:10728
angular.js:10765 XMLHttpRequest cannot load http://webapiaddres/api/SomeController/GenerateCaptcha. Failed to start loading.
So the error suggests for me that I should serve the web api self host over an https addres. So in the config of that web api self host I'm changing it to https//webapiaddres/
But then I'm getting this:
angular.js:10765 GET
https:/webapiaddress/api/SomeController/GenerateCaptcha
net::ERR_INSECURE_RESPONSE
What am I doing wrong? Why is this happening. Strange thing is that that this does not scream that I don't have CORS enabled, but this could be because of the fact that this web api selfhost and the site is on the same server. I can't find any simmilar problem to mine in google.
I've managed to solve the problem with my colleage and it was very simple. It did not came up at first glance. I've ran the address of the web api in the chrome browser and there there was an request for accepting an certificate. When I did that everything went smooth. This is the work for our administrator not from the code, but this was quite interesting experience.