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!
Best Answer
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:
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.