未使用Fetch API填充请求标头

Question

我正在尝试一项我不了解的事情。当我尝试使用Fetch API设置请求的标头时，实际上没有定义标头。

这是一段代码，还有一个小提琴的链接，可以复制。

function createRequest(type, url, payload) {
  const options = { headers: {
    "Content-Type": "application/json",
    "x-request-id": '...',
    "x-sender-id": "mysender"
  },
  method: 'POST',
  body: JSON.stringify(payload),
  mode: 'no-cors',
  cache: 'no-cache'
  };
  return new Request(url, options);
}

// -----------------------------
// a simple test
const request = createRequest('post', '/check', {test: 'where are my headers?'});

当我使用Headers对象创建标题时，标题会丢失。即使我使用set或append方法填充标题也是如此。 按规定使用new Headers({...}); here不能解决问题。更改mode也不会产生任何变化。 跟随this也会失败。

Link to the fiddle

结果，没有定义标头（我也没有定义正文）。

如果有人对此问题有想法，我会考虑：D

致谢。

Answer 1

由于您使用的是mode: 'no-cors'，因此您只能使用simple headers

• 接受
• 接受语言
• 内容语言
• 内容类型

这是在无核条件模式下允许使用的所有标头

来源：documentation

下面，第一个请求的模式为no-cors，第二个请求的模式相同（尽管这也可能是cors，并且工作原理相同）

// Code goes here

function createRequest(type, url, payload, corsmode) {
  const options = {
    headers: {
      "Content-Type": "application/json",
      "x-request-id": '...',
      "x-sender-id": "mysender"
    },
    method: 'POST',
    body: JSON.stringify(payload),
    mode: corsmode,
    cache: 'no-cache'
  };
  return new Request(url, options);
}

// -----------------------------
// a simple test
const request = createRequest('post', '/check', {
  test: 'where are my headers?'
}, 'no-cors');


console.log([...request.headers.entries()]);

const request2 = createRequest('post', '/check', {
  test: 'where are my headers?'
}, 'same-origin');

console.log([...request2.headers.entries()]);