web-dev-qa-db-ja.com

http.GETを要求するときに送信されるAngular2 OPTIONSメソッド

Angular2アプリに 基本認証 を追加しようとしています。

public login() {
    // Set basic auth headers
    this.defaultHeaders.set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password));

    console.log('username', this.username)
    console.log('password', this.password)
    console.log(this.defaultHeaders)

    // rest is copy paste from monbanquetapiservice
    const path = this.basePath + '/api/v1/development/order';        

    let req = this.http.get(path, { headers: this.defaultHeaders });
    req.subscribe(
        _ => { },
        err => this.onError(err)
    );
}

私が期待するのは、Authorizationheaderを指定したGETリクエストです。

しかし、私が最初に目にするのは、このヘッダーを持つOPTIONSです：

OPTIONS /api/v1/development/order HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,fr;q=0.4

私のサーバーはこのURLでOPTIONSを許可していないため、エラーが発生します。

PUTやPOSTなどの一部のメソッドは、リクエストをプリフライトするために最初にOPTIONSメソッドを送信しますが、GETは送信しません。

なぜangular2のhttpが最初にOPTIONSを送信するのですか？

ありがとう。

httpcorsangular
42
amaurymartiny

これがCORSの動作方法です（クロスドメインリクエストを使用する場合）。 CORSでは、リモートWebアプリケーション（ここではドメインmydomain.orgのアプリケーション）は、特定のヘッダーセットのおかげでリクエストを処理できるかどうかを選択します。

CORS仕様では、2つの異なるユースケースを区別しています。

  • 単純なリクエスト。この使用例は、HTTP GET、HEADおよびPOSTメソッドを使用する場合に適用されます。 POSTメソッドの場合、次の値を持つコンテンツタイプのみがサポートされます：text/plain、application/x-www-form-urlencodedおよびmultipart/form-data。
  • プリフライトされたリクエスト。 「シンプルリクエスト」のユースケースが適用されない場合、クロスドメインリクエストのコンテキストで何ができるかを確認するために、最初のリクエスト（HTTP OPTIONSメソッドを使用）が行われます。

OPTIONSリクエストを送信するのはAngular2ではなく、ブラウザ自体です。それはAngularに関連するものではありません。

詳細については、次の記事をご覧ください。

74
Thierry Templier

GETリクエストの代わりにOPTIONSリクエストを受け取るのはなぜですか？

これは、ブラウザ自体によって生成されるCORSプリフライトリクエストです。

こちらもご覧ください
- OPTIONSリクエストを無効にする方法

サーバーは、CORS要求をサポートするように構成する必要があります。その場合のみ、GET要求の後に実際のOPTIONS要求がブラウザーによって送信されます。

こちらもご覧ください
- 「要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません」 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Access-Control-Allow-Credentials

資格情報フラグがtrueの場合に、要求への応答を公開できるかどうかを示します。これは、プリフライトリクエストへの応答の一部として使用される場合、資格情報を使用して実際のリクエストを作成できるかどうかを示します。単純なGETリクエストはプリフライトされないため、リクエストが資格情報を持つリソースに対して行われた場合、このヘッダーがリソースとともに返されない場合、ブラウザーによってレスポンスが無視され、Webコンテンツに返されないことに注意してください。

6
Günter Zöchbauer