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

前端 未结 4 2075
广开言路
广开言路 2021-02-07 21:47

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.

相关标签:
4条回答
  • 2021-02-07 22:16

    The meta tag below helps to prevent Chrome complaining about HTTP request made. I was working on a class projects (a weather app) and the API call over HTTP and adding an S to the HTTP call doesn't help. Since this a project a there no major issue. The meta tag share above by @Medhi Ibrahim does the trick.

    <meta> http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    
    0 讨论(0)
  • 2021-02-07 22:17

    only add this on header section.

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    
    0 讨论(0)
  • 2021-02-07 22:32

    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">
    
    0 讨论(0)
  • 2021-02-07 22:32

    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:

    1. As Chrome suggests, change your API calls to use HTTPs (recommended)
    2. Use HTTP instead of HTTPs
    3. 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.

    0 讨论(0)
提交回复
热议问题