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

Question

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

我将内容类型设置为application/json，但是请求头被设置为text/plain。

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

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

Answer 1

看了下面这篇文章，我找到了答案：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

由于标头可以在请求中发送，也可以在响应中接收，并且对于哪些信息可以且应该是可变的有各种限制，因此标头对象有一个guard属性。这不会向Web公开，但会影响headers对象上允许的变异操作。

可能的防护值为：

• none：默认值

注意：您不能附加或设置请求受保护的标题“内容长度标题。同样，不允许在响应头中插入Set Cookie：不允许ServiceWorkers通过合成响应设置Cookie。

当options mode属性设置为no cors时，请求头的值是不可变的。

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

Answer 2

您需要创建一个fetch headers对象。

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);
}