向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请求添加自定义标头

回答

相关问题