Aureliaフェッチリクエストにカスタムヘッダーを追加する

Question

Aureliaのフェッチクライアントを使用して、すべてのGETおよびPOSTリクエストにカスタムヘッダーを追加しようとしています。 （app.jsコンストラクタで）次のコードは、ベースURLを設定するために動作しますが、ヘッダーは私が望むように動作していません。

constructor(httpClient) { 
    // set up httpClient 
    httpClient.configure(config => { 
    config 
     .withBaseUrl(localsettings.api) 
     .withDefaults({ 
     credentials: 'include', 
     headers: { 
      'my_appkey': 'f2eabc5e7de-a4cdc857e' 
     } 
     }) 
    }); 
    this.httpClient = httpClient; 
} 

使用法：Chromeの開発ツールを通じ

this.httpClient.fetch(suburl, { 
    credentials: 'include' 
    }).then(response => { ... }); 

、私は「my_appkey」ヘッダが存在するが、それは自分のヘッダだとして、それが作成されていないと、その値が表示されていないことがわかります。

リクエストヘッダ：

OPTIONS /index.php/api/v1/keys HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://localhost:9000 
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 
Access-Control-Request-Headers: my_appkey 
Accept: */* 
Referer: http://localhost:9000/ 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: en-US,en;q=0.8,es-419;q=0.6,es;q=0.4 

私は間違っていますか？カスタムヘッダーをAccess-Control-Request-Headersに移動するのはなぜですか？リクエストにmy_appkeyヘッダを追加

Answer 1

は、まずあなたがしたい実際のGET/POST要求を試みる前にa CORS preflight OPTIONS requestを実行するには、ブラウザが起動されます。そのプリフライトOPTIONSの一環として

OPTIONS /index.php/api/v1/keys HTTP/1.1 
^^^^^^^ 

、ブラウザは、その値があなたのコードからのリクエストに追加したヘッダの名前が含まれてAccess-Control-Request-Headers headerを送信します。

実際の要求が行われたときにどのHTTPヘッダーが使用されるかをサーバーに知らせるためのプリフライト要求を発行するときに、Access-Control-Request-Headers要求ヘッダーが使用されます。

あなたが見ているのは、すべて予想される動作です。

そして、そのプリフライトOPTIONS要求の成功を検討するブラウザためには、要求がに行われているサーバーは、値も「my_appkey」を含むAccess-Control-Allow-Headers response headerを持って応答を送信する必要があります。そうでない場合は、ブラウザがすぐそこで停止し、実際のGET/POSTリクエストを送信することはありません。