使用 FetchAPI 时如何设置请求头的内容类型

我正在使用 npm“同构获取”来发送请求。我遇到的问题是我无法设置请求头的内容类型。

我设置了 application/json 的内容类型，但是请求标头被设置为 text/platen。

import 'isomorphic-fetch';


sendRequest(url, method, body) {
const options = {
method: method,
headers:{'content-type': 'application/json'},
mode: 'no-cors'
};


options.body = JSON.stringify(body);


return fetch(url, options);
}

当我在浏览器中检查请求时，内容类型为 o:

content-type:text/plain;charset=UTF-8

有人能解释一下为什么我不能设置这个属性吗？

130868 次浏览
小开

我读了下面这篇文章后找到了答案:

Https://developer.mozilla.org/en-us/docs/web/api/fetch_api/using_fetch#headers

警卫

由于头可以在请求中发送，在响应中接收，并且对什么信息可以和应该是可变的有各种限制，因此头对象具有保护属性。这不会暴露给 Web，但会影响头对象上允许哪些变异操作。

可能的保护值是:

  • none: 默认。
  • request: 从请求获得的头对象的保护(Request.headers)。
  • request-no-cors: 保护从用 Request.mode no-cors创建的请求获得的头对象。
  • response: 保护从响应(Response.headers)获得的 Header。
  • immutable: 主要用于 ServiceWorkers; 以只读方式呈现头对象。

注意 : 您不能附加或设置 request保护的 Header 的 Content-Length Header。类似地，不允许在响应头中插入 Set-Cookie: ServiceWorkers 不允许通过合成响应设置 cookie。

当选项模式属性设置为 no-cors 时，请求标头值是不可变的。

相反，我将 mode 属性设置为 cors。

小开

您需要创建一个提取头对象。

sendRequest(url, method, body) {
const options = {
method: method,
headers: new Headers({'content-type': 'application/json'}),
mode: 'no-cors'
};


options.body = JSON.stringify(body);


return fetch(url, options);
}

提交答案