BASE_URL = "http://********:8091/api/v1";
I have uploaded my react-js application on netlify.com. in react js I implemented APIs.... when I hit APIs after deploying I got this error on console:
Mixed Content: The page at 'https://xyz.netlify.app/' was loaded over
HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://***:8091/api/v1/categories/'. This request has been
blocked; the content must be served over HTTPS.
what is the solution to this
Unfortunately, There's no way to disable mixed content
Just Add the Below meta tag to your HTML file
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Related
I have a React app deployed in gh-pages which is loaded over https, and it sends requests to an EC2 instance that is using http.
The problem is that the HTTP requests that the React app is doing are being changed to HTTPS requests, which are not supported by this EC2 instance, so they always fail.
Any Ideas as why this is happening?
PD:
Of course I had this error first: Mixed Content: The page at xxx was loaded over HTTPS, but requested an insecure font yyy.
But I fixed it with the following tag:
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>
I know I should eventually load my EC2 instance over https, but I need a fix for now :P. Thank you guys.
I get the following error in the Chrome's web console on my deployed React app:
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
However, I have specified frame-src in my index.html like in the following snippet:
<meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com/">
The source for the error is a YouTube embed, and with the meta tag in place the embed works fine on localhost. What could cause this error only to appear on a deployed React app?
Fixed it by adding Content-Security-Policy header on the server. So it wasn't an issue with the front-end code after all.
I display an image in my reactjs component by using an <img src="https://<site>" /> element.
Running on localhost, all is fine, but when I deploy to my server (azure) I get the following error when I try and get the same image:
Refused to load https://<my-azure-blob-storage>/img because it does not appear in the img-src directive of the Content Security Policy.
Google says to implement meta Content Security Policy in the head tag in the index.html (for react), where I've tried adding the following: <meta http-equiv="Content-Security-Policy" content="img-src https://<my-azure-blob-storage>/">
I can't seem to find any more resources, and as a last option, I can retrieve the image via js and then show image as base64, but I would like to get this option to work
I am getting the following issue when I converted HTTP to https in Drupal
Site was loaded with HTTPS but requested an insecure stylesheet
'http://fonts.googleapis.com/css?family=Open+Sans:regular&subset=cyrillic-ext'.
This request has been blocked; the content must be served over HTTPS
Thanks in advance
Thanks Everyone, I added
$_SERVER['HTTPS'] = 'on'
in settings.php file and http converted to https
Im using Bootstrap and AngularFire for my Web project. Everything ok but when I host it on Firebase.com. The layout has changed
Errors:
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
What happens with Bootstrap? Thanks in advance!
Firebase uses HTTPS to serve content. As you can see from the error, you are referring the content to be loaded over HTTP. Though this should not be happening, but it could be one of recent features of Chrome where they block, non-secure requests over a secure channel.
In order to solve it, you should change the URLs in your code to point at HTTPS versions of Bootstrap CDN.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Further Read: https://support.google.com/chrome/answer/1342714?hl=en
I was having the same issue:
you just need to make the http to https
in the bootstrap link inside the code.
That will resolve the issue.