[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
質問
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に行うようでは、アプリが安全であるという目的を失うことになります。
したがって、どちらかです。
- Chrome が提案するように、API コールを HTTP を使用するように変更します ( 推奨 )
- HTTPsの代わりにHTTPを使用する
-
以下を追加します。
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 .
関連
-
fetch ネットワークリクエストラッパーの説明例
-
JavaScriptのクロージャの説明
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vueディレクティブv-bindの使用と注意点
-
vue ディレクティブ v-html と v-text
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
Vueにシンプルなメモ帳機能を実装
-
Vueの「データを聴く」原則を解説
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
JavaScriptのgetElementById()メソッド入門