将自定义标头添加到 Aurelia Fetch 请求

Question

>我正在尝试使用Aurelia的Fetch客户端为所有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;
}

用法：

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？

Answer 1

将my_appkey标头添加到请求会触发浏览器首先执行 CORS 预检OPTIONS请求，然后再尝试要发出的实际GET/POST请求。

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

作为该预检OPTIONS的一部分，浏览器会发送一个Access-Control-Request-Headers标头，其值包括您从代码添加到请求中的标头的名称。

发出预检请求时使用 Access-Control-Request-Headers 请求标头，以使服务器知道在发出实际请求时将使用哪些 HTTP 标头。

所以你所看到的都是预期的行为。

为了使浏览器认为预检OPTIONS请求成功，发出请求的服务器必须发送具有Access-Control-Allow-Headers响应标头的响应，其值还包括"my_appkey"。如果没有，则浏览器将停在那里，并且永远不会继续发送您要发出的实际GET/POST请求。