Web API Error - This request has been blocked; the content must be served over HTTPS

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!

The Chrome error message has explained exactly what the problem is, and how you need to fix it.
– duskwuff
Sep 1 at 18:16

You can add the domain of your API to allowed resources in your html head. And like the error said: use https
– Simon Franzen
Sep 1 at 18:18

@duskwuff Yes So we need to consume all APIs with https protocol only. But do we need to fix in angular from where we are consuming APIs OR from web api side also ?
– XamDev
Sep 1 at 18:19

@SimonFranzen can you give example how to add domain of APIs in allowed resources in HTML head ?
– XamDev
Sep 1 at 18:25

Google: CORS allow Domain . Sorry I am on the way .....
– Simon Franzen
Sep 1 at 18:27

1 Answer
1

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

<head>

<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.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt