web-dev-qa-db-ja.com

XMLHttpRequestをクロスドメインwithCredentials、HTTP Authorization（CORS）にする方法は？

Authorizationヘッダーを使用してクロスドメインリクエストを作成できません（Firefoxでテスト）。認証なしで機能するリクエストがありますが、withCredentialsをtrueに設定すると、サーバーからの応答を読み取ることができなくなります。

サーバー上でこれらのヘッダーを送り返します（after_request Flaskのメソッド）：

resp.headers['Access-Control-Allow-Origin'] = '*'
resp.headers['Access-Control-Allow-Credentials'] = 'true'
resp.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'
resp.headers['Access-Control-Allow-Headers'] = 'Authorization'

FirefoxでOPTIONS呼び出しが実際に行われることはありません。クライアントで、XMLHttpRequest呼び出しを行います。

var xhr = new XMLHttpRequest()
xhr.open( 'POST', 'http://test.local:8002/test/upload', true)
xhr.withCredentials = true
xhr.onreadystatechange = function() {
    console.log( xhr.status, xhr.statusText )
}
xhr.send(fd)

withCredentialsが設定されていない場合、ログステートメントは期待される情報をコンソールに記録します。ただし、値を設定するとxhrはアクセスを許可せず、値0と空の文字列を書き込むだけです。ここでは認証ヘッダーを設定していませんが、結果を読み取る能力に影響はありません。

「open」コマンドにユーザー名/パスワードを追加しようとすると、NS_ERROR_DOM_BAD_URI: Access to restricted URI deniedエラー。

私は何を間違えていますか？

httpxmlhttprequestcors
23
edA-qa mort-ora-y

私は 記事を書いた 完全なCORSセットアップを使用しました。

この問題を引き起こす可能性のある問題をいくつか見つけました。

  1. 資格情報が使用されている場合、_Access-Control-Allow-Origin_をワイルドカードにすることはできません。リクエストのOriginヘッダーをこのフィールドにコピーするのが最も簡単です。標準がワイルドカードを許可しない理由は完全に不明です。
  2. Firefoxは、キャッシュをクリアした場合でも（おそらくセッションのために）Access-Controlの結果をキャッシュします。再起動すると、新しいOPTIONS要求が強制的に実行されました。デバッグを支援するために、ヘッダー_Access-Control-Max-Age: 1_を追加しました
  3. openコマンドのユーザー名/パスワードは、明らかに資格情報として使用できません。 Authorizationヘッダーを自分で追加する必要があります。 xhr.setRequestHeader( 'Authorization', 'Basic ' + btoa( user + ':' + pass ) )

全体的にwithCredentialsシステムはかなり頭が悪いです。リクエストの本文の一部として承認を受け入れるサーバーを記述する方が簡単です。

42
edA-qa mort-ora-y