1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト

[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません

2021-12-29 22:04:56

質問

angular 5 を使って api をリクエストすると(Azure にデプロイされている)、以下のようなエラーが報告されます。

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

解決するには?

あなたが示したように、あなたのウェブアプリがHTTPsでホストされているなら、それが消費するすべての外部リソース(CDN、スクリプト、CSSファイル、APIコール)もSSLを使用し、HTTPsを通じて保護されるべきです。考えてみてください。アプリが安全でないリクエストをAPIに行うようでは、アプリが安全であるという目的を失うことになります。

したがって、どちらかです。

  1. Chrome が提案するように、API コールを HTTP を使用するように変更します ( 推奨 )
  2. HTTPsの代わりにHTTPを使用する
  3. 以下を追加します。 meta タグを <head> をHTMLに追加してください。

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

この件に関する詳細は、こちらをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests .