自定义标头未添加到请求对象答案

【问题标题】：custom headers are not added to Request object自定义标头未添加到请求对象
【发布时间】：2017-07-19 06:48:45
【问题描述】：

我正在尝试使用fetch api。

首先我创建一个new Headers() 对象：

var oHeaders = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    "X-DocuSign-Authentication": '{"Username":"xxx","Password":"xxx","IntegratorKey":"xxx"}'
})

如果我尝试记录标题，则在实例化标题后一切都正确。

oHeaders.forEach(function(v){console.log(v)})
//logs: 2 application/json {"Username":"xxx","Password":"xxx","IntegratorKey":"xxx"}

我创建了 Request 对象：

var oReq = new Request('https://eu.docusign.net/restapi/v2/login_information', {
  method: 'GET',
  headers: oHeaders,
  mode: 'no-cors',
});

如果我尝试记录请求对象的标头，则只会出现 accept 标头。

oReq.headers.forEach(function(v){console.log(v)})
//logs: application/json

如果我尝试fetch(oReq)，我会收到401 unauthorized 响应。

是什么让标题消失了？

【问题讨论】：

所以您也在https://eu.docusign.net/ 下运行的脚本中对此进行测试？或者如果不是，你为什么要设置mode: 'no-cors'？
我必须使用no-cors，因为Access-Control-Allow-Origin。该请求必须从不同的服务器客户端发出。即使没有no-cors，我也尝试检查标题并且标题仍然消失。
这毫无意义。因为您正在向不同的域发出请求，所以它需要启用 CORS。

标签： javascript cors http-headers fetch fetch-api

【解决方案1】：

当您为请求设置 mode: 'no-cors' 时，浏览器将不允许您设置除 CORS-safelisted request-headers 之外的任何请求标头。见the spec requirements:

要将名称/值 (name/value) 对附加到 Headers 对象 (headers)，请运行以下步骤：

否则，如果 guard 是 "request-no-cors" 并且 name/value 不是 CORS-safelisted request-header，则返回。

在该算法中，return 等同于“返回而不将该标头添加到 Headers 对象”。

【讨论】：