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

Question

我正在尝试使用Aurelia的Fetch Client将自定义标头添加到所有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标头添加到请求中会触发浏览器，在尝试尝试进行实际的GET / POST请求之前，先执行CORS预检OPTIONS请求 。

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请求。