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的开发工具，我可以看到＆＃34; my_appkey＆＃34;标题存在，但它没有被创建为它自己的标题，其值不可见：

请求标题：

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标头会触发浏览器首先执行a CORS preflight OPTIONS request，然后再尝试实际的GET / POST请求。

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

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

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

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

为了让浏览器认为预检OPTIONS请求成功，请求服务器必须发送一个Access-Control-Allow-Headers response header的响应，其值还包括＆＃34; { {1}}＆＃34 ;.如果没有，则浏览器会在此处停止，并且永远不会发送您想要发送的实际my_appkey / GET请求。

向Aurelia Fetch请求添加自定义标头

1 个答案: