Web API-fout – Dit verzoek is geblokkeerd; de inhoud moet worden aangeboden via HTTPS

We hebben de api op azure geïmplementeerd en proberen deze te consumeren in onze web-app geschreven in hoek 5. Wanneer we echter proberen de api te consumeren, krijgen we de volgende fouten.

Chromegemengde inhoud: de pagina op ‘https://somedevapp.azurewebsites .net/#/managesomething‘ is geladen
via HTTPS, maar heeft een onveilig XMLHttpRequest-eindpunt aangevraagd
http://admindevapp.azurewebsites.net/api/data/getdata‘. Dit verzoek
Is geblokkeerd; de inhoud moet worden aangeboden via HTTPS.

FirefoxGeblokkeerd laden van gemengde actieve inhoud

Heeft dit probleem te maken met CORS? Hoe dit probleem op te lossen?

Alle hulp hierbij wordt op prijs gesteld!


Antwoord 1, autoriteit 100%

Als uw web-app wordt gehost via HTTPs, zoals u heeft aangegeven, moeten alle externe bronnen die het gebruikt (CDN, scripts, CSS-bestanden, API-aanroepen) ook SSL gebruiken en beveiligd zijn via HTTPs. Denk er over na. Het zou het doel van uw app om veilig te zijn teniet doen, als uw app op zijn beurt onveilige verzoeken zou doen aan een API.

U kunt daarom:

  1. Zoals Chrome suggereert, wijzigt u uw API-aanroepen om HTTP’s te gebruiken (aanbevolen)
  2. Gebruik HTTP in plaats van HTTPs
  3. Voeg de volgende meta-tag toe aan uw <head>-element in uw HTML:

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Meer informatie hierover vindt u hier: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.


Antwoord 2, autoriteit 17%

Gebruik dit —- Voeg toe aan je hoofdsectie
Ik zal dit proberen met mijn weerapplicatie & nu werkt het prima

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Antwoord 3, autoriteit 11%

voeg dit alleen toe aan het kopgedeelte.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Antwoord 4, autoriteit 6%

De onderstaande metatag helpt voorkomen dat Chrome klaagt over het ingediende HTTP-verzoek. Ik werkte aan een klasproject (een weer-app) en de API-aanroep via HTTP en het toevoegen van een S aan de HTTP-aanroep helpt niet. Aangezien dit een project is, is er geen groot probleem. Het metatag-aandeel hierboven door @Medhi Ibrahim doet het.

<meta> http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Antwoord 5, autoriteit 6%

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

u kunt dit alleen gebruiken als uw resource-API het HTTPS-verzoek ondersteunt.

voorbeeld: “http://ip-api.com/json” en “https://ip-api.com/json” geven beide niet hetzelfde antwoord als “ip-api.com” dat niet doet ondersteuning voor HTTPS-verzoeken.

Other episodes