Menu
We have deployed the api on azure and trying to consume in our web app written in angular 5. However when we try to consume the api we are getting following errors.
Chrome Mixed Content: The page at 'https://somedevapp.azurewebsites.net/#/managesomething' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://admindevapp.azurewebsites.net/api/data/getdata'. This request has been blocked; the content must be served over HTTPS.
Firefox Blocked loading mixed active content
Is this issue related to CORS? How to resolve this issue?
Any help on this appreciated!
338
This request has been blocked; the content must be served over HTTPS. Steps to Replicate: Create a page over HTTPS and make a request for HTTP Endpoint. Chrome has a security feature to block insecure content (HTTP) which is being loaded via a secure page (HTTPS).
You are trying to access via "http" on a "https" site, its best to use "https" content. You shouldn't access insecure data on a secure channel. Sometimes just use 'http' instead of 'https' can solve this issue.
How to fix your website. The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP. For your own domain, serve all content as HTTPS and fix your links. Often, the HTTPS version of the content already exists and this just requires adding an "s" to links - http:// to https://.
If your web app is being hosted over HTTPs as you've indicated, then all external resources it is consuming (CDN, scripts, CSS files, API calls) should also use SSL and be secured through HTTPs. Think about it. It would defeat the purpose of your app being secure, if your app was in turn making insecure requests to an API.
You can either therefore:
As Chrome suggests, change your API calls to use HTTPs (recommended)
Use HTTP instead of HTTPs
Add the following meta tag to your <head> element in your HTML:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
More information about this can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.
188
Use this ---- Add in your head section I will try this with my weather application & now it's working fine
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
