I made a simple weather app using react. It was working well. But when I hosted it on Github, it gives the error and is not working properly. Do someone know how to resolve this error?
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
my errors
2nd screenshot
To fix the error you need to make sure that all external resources are all running over HTTPS.
So in this instance, you just need to change the openweathermap.com resource to load from https rather than http. If you leave it as http, then it just won't get loaded and then you'll end up with a ton of js errors as the code wasn't loaded properly.
use https instead of http as the protocol of your base url
Related
I have spent a bit of time making this and it works well locally but on the server it breaks due to the below error. The API I am using seems to be on an insecure 'http:' address so the browser won't allow it's connection as my website is on an 'https' address. Is there any way to get around this with some kind of proxy/heroku thing?
Github
The broken app website
Mixed Content: The page at
'https://agwebdesign.net/react/petadoption/' was loaded over HTTPS,
but requested an insecure script
'http://api.petfinder.com/pet.find?key=920cf4ddd938497ba32bef47b7f35080&format=json&output=full&location=Seattle%2C%20WA&animal=&breed=&callback=jsonp_jfg1sgfprug5jl1'.
This request has been blocked; the content must be served over HTTPS.
This is what worked for me on react 16.12 hosted on vercel with a backend using an insecure 'HTTP:' address
Step 1. Go to the website's information section (the "i" button on the left-right corner, beside your URL)
Step 2. Scroll down to the "insecure content" and choose "allow" from the dropdown
step 3. Refresh your page and you're good to go
Why would you want to do this? You should be using HTTPS everywhere. With tools like Let's Encrypt there's no longer any excuse not to.
In any case, that particular URL seems to also be served over HTTPS. Simply change the protocol from http:// to https:// and it should stop getting blocked.
I access a server that I can change in any way. It is only available to me.
GETS / POSTS work in curl, but I get an error in my angular web app
I read a ton of posts about this, and after nothing seemed to work, I installed the CORS extension to Chrome, added *://*/*, and I have to turn it on anytime I'm trying to access the server. But it works.
Most of the posts say this is because the server does not allow access from outside sources. So I did some more digging and found the W3 CORS enabled site, that specifies a filter must be added.
However, when I get the error, I can open the network panel and see that the response came back exactly as I was expecting, so why did I get an error?
This makes it seem like Chrome is not allowing access.
Why must the server be changed to allow this?
Does this mean anyone with this chrome extension can access my server?
It seems like it should be possible to configure a header in my $http.get that would allow this, but everyone keeps saying its the server...
Cross domain calls are not allowed by default. When the browser makes a call to a website or Web-API sitting on a different domain than the domain opened on the browser, it includes a HTTP header "Origin" in the request. The server looks at this header and if it's white-listed it includes the header Access-Control_Allow_Origin in the response. All this happens in a pre-flight request using HTTP Options method before the actual GET/POST call. So for the CORS to work the server has to allow the client domain, so the browser can make further calls.
We are using AWS cloudfront to store our translation locale JSON files. Our Angular application gets these files via StaticFilesLoader in angular translate module.
In most cases it works perfectly. However after an environment is freshly created AWS could responses redirect to other location to get translation files. It is normal cloudfront behavior. But StaticFilesLoader is not able to follow this redirect and crashes with error:
XMLHttpRequest cannot load https://some.cloudfront.net/3...9-a...0-1..c-9...f/i18n/locale-en.json. Response for preflight is invalid (redirect)
Is there any known solution of this issue? Could you please give me some suggestion how to solve it?
A workaround could be to write interceptor to catch the redirect and fetch data with provided URL. But I decided to ask community before.
The users of our website run our Chrome plugin which, amongst other things, performs cross-origin requests via XMLHttpRequest as described on the Chrome extension development pages. This has been running just fine for a few years now. However, ever since our users upgraded to the latest version of Chrome (v38), these requests have failed. Our site runs on HTTPS and some of the URLs loaded via our content script are on HTTP. The message is:
[blocked] The page at 'https://www.ourpage.com/' was loaded over
HTTPS, but ran insecure content from 'http://www.externalpage.com':
this content should also be loaded over HTTPS.
The reported line where the error occurred is in the content script where I'm issuing the HTTP call:
xhr.send(null);
I have no control over the external page and I would rather not remove SSL from our own page. Question: Is this a bug or is there a workaround that I am not aware of?
(Note: The permissions in the manifest were always set to <all_urls> which had worked for a long time. Setting it to http://*/ and https://*/ did not help.)
If possible, use the https version of that external page.
If that is not possible, use the background page to handle the AJAX request (example).
Please look at this page
(https)[url]/cart
and compare with
(http)[url]/cart
You will notice the console errors on the secure version and there are no console errors in the insecure version. I am using Angular custom directives they are not resolving over the secure protocol. My assumption would be there is a resource which is being blocked?? However I cannot find this resource... any ideas?
I have also tested this locally with a self signed certificate and it works fine.
The problem is this partial is entirely different between your http and https server:
/partials/bonuses.html
The https version of bonuses is just a page with a script that sets the window.location to the non-https version. As far as I know, you cannot put an html tag as a directive's template, and that's why angular is throwing up errors. It wouldn't make any sense to do that anyway.
You need to make sure that the https server serves the full bonuses.html partial, and not just a redirect to http