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

Question

我正在使用npm'isomorphic-fetch'来发送请求.我遇到的问题是我无法设置请求标头的内容类型.

我设置了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

守护

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

可能的保护值是:

• none:默认.
• request:保护从request(Request.headers)获得的头对象.
• request-no-cors:保护从使用创建的请求获得的头对象Request.mode no-cors.
• response:保护从响应中获得的标题(Response.headers).
• immutable:主要用于ServiceWorkers; 将标头对象呈现为只读.

注意:您不得附加或设置受request保护的标题Content-Length标题.同样,Set-Cookie不允许插入响应头:不允许ServiceWorkers通过合成响应设置cookie.

当options mode属性设置为no-cors时,请求标头值是不可变的.

相反,我将mode属性设置为cors.

Answer 2

您需要创建一个fetch header对象.

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

Answer 3

使用时无法设置某些标头mode: "no-cors"。

所以你可以查看 Mozilla 网站： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch