向Aurelia Fetch請求添加自定義標頭

我試圖使用Aurelia的Fetch Client向所有GET和POST請求添加自定義標頭。下面的代碼（在app.js構造函數）的工作原理，設置基本URL，但頭部沒有工作，我想要的方式：向Aurelia Fetch請求添加自定義標頭

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

用法：

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

通過Chrome的開發工具，我可以看到「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？

來源

2017-06-05 LStarky

添加my_appkey頭的請求觸發來試圖要進行的實際GET/POST請求之前先進行a CORS preflight OPTIONS request瀏覽器。

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

由於該預檢OPTIONS一部分，瀏覽器發送一個Access-Control-Request-Headers header，其價值包括您已經添加到你的代碼中請求頭的名稱。

訪問控制請求頭請求標頭用於發出預檢請求，讓服務器知道在實際請求時使用哪個HTTP頭。

所以你看到的是所有預期的行爲。

而且爲了使瀏覽器考慮預檢OPTIONS請求成功，請求服務器必須發送具有Access-Control-Allow-Headers response header的響應，其值也包括「my_appkey」。如果沒有，那麼瀏覽器停在那裏，永遠不會發送你想要的實際的GET/POST請求。

來源

2017-06-05 16:53:07 sideshowbarker

因此，分析這個，也許增加一個自定義頭並不是最好的方法，因爲它會減慢請求的速度（預檢請求會增加更多的延遲，看起來）。將所有請求傳遞給appkey的更快方式是什麼？只要把它作爲身體的一部分？ – LStarky

是的，如果你想避免額外的請求，我想發送appkey作爲請求體的一部分而不是頭部將是最簡單的方法。也就是說，如果你真的想要更快，你可以將你的應用程序代碼放在與API端點相同的服務器/源端上 – sideshowbarker

如果它們被託管在同一個子域中（例如myapp.school.edu），那麼獲取會在沒有需要的情況下發送標題做一個預檢請求？ – LStarky

向Aurelia Fetch請求添加自定義標頭

回答

相關問題