[解決済み】angularでpreflightのレスポンスがHTTP okステータスにならない。
2022-01-27 01:51:55
質問
私のサービスでは、次のようなgetリクエストが定義されています。
createAuthorizationHeader(user, pass) {
let headers: HttpHeaders = new HttpHeaders;
headers = headers.append('Accept', 'application/json, text/plain, */*');
headers = headers.append('Authorization', 'Basic ' + btoa(user + ':' + pass));
headers = headers.append('Content-Type', 'application/json; charset=utf-8');
console.log(headers);
return this.http.get(this._loginUrl, {
headers: headers
});
}
その結果、次のようになります。
OPTIONS https://localhost:8443/delivery/all 401 ()
Failed to load https://localhost:8443/delivery/all: Response for preflight does not have HTTP ok status.
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
また、Postmanで同じpost requestをしましたが、すべてうまくいったので、ローカルサーバは機能しています。
私のリクエストの何が間違っているのかがわかりません。
どうすればいいですか?
CORS 契約では、飛行前の OPTIONS リクエストで認証が要求されないことが要求されています。あなたのバックエンドは、OPTIONSリクエストとGETで認証を要求しているように見えます。
Postmanでバックエンドにアクセスするとき、あなたはGETを送信しているだけです。 ブラウザはまずOPTIONSリクエストを送信し(認証ヘッダなし)、そのレスポンスにリクエストを行ったページのオリジンに一致する "Access-Control-Allow-Origin"ヘッダがあるかどうか探します。
OPTIONSリクエストに対するレスポンスが2xxでない場合、またはヘッダーが存在しない場合、またはヘッダー値がリクエストページのオリジンと一致しない場合、あなたが経験しているエラーが発生し、GETリクエストは行われないでしょう。
TLDR; OPTIONSメソッドでログインURLを処理する際に、認証を必要としないようにバックエンドを変更することです。
関連
-
[解決済み】Android 8:クリアテキストのHTTPトラフィックが許可されない
-
[解決済み] テンプレートパースエラーです。'mat-icon' は既知の要素ではありません。
-
[解決済み] イオン4オブザーバブル
-
[解決済み] エラーです。参照または変数に代入できません! Angular 4 [重複]の場合
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] updateとdeleteのHTTPステータスコード?
-
[解決済み] リソースが既に存在する場合の POST に対する HTTP レスポンスコード
-
[解決済み] 検証失敗または重複が無効な場合のREST HTTPステータスコード
-
[解決済み] ローカルファイルの読み込み時に "Cross origin requests are only supported for HTTP." というエラーが発生する。
-
[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ERR_INVALID_HTTP_RESPONSEをAngular 7とASP.Net Core 2.2を使ってGoogle Chromeブラウザーで使用する場合
-
[解決済み] node_modules が空になったので、`npm install`を実行する必要があるかもしれない。
-
[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。
-
[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ?
-
[解決済み] チョキダーからのエラー(C:┣ᴗ┣)。Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp.
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] Angular2 - エラー。セレクタ "app-root" はどの要素にもマッチしませんでした。
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] Angular2の$document.ready()に相当します。
-
[解決済み] ローカルホストが私のアンギュラーアプリに対して無効な応答を送信しました。