使用Fetch API时如何设置请求头的Content-Type

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

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

- user1526912

Answer 1

您需要创建一个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);
}

- RTS

---

这个语法可以正常工作 headers: { "Content-Type": "application/json" },。 - Stanislav Mayorov

@RTS：如果包括凭据，这似乎无法运行。 - user2284570

当使用 useQuery (mutation) 和 fetch 调用时，这种方法不起作用。 - skate_23

Answer 2

在阅读以下文章后，我找到了答案：

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#Headers

保护

由于请求和响应中都可以发送头信息，并且有各种限制，头信息对象具有一个保护属性。这不会向Web公开，但它影响允许对头信息对象进行哪些修改操作。

可能的保护值包括：

• none: 默认值。
• request: 从请求（Request.headers）获取的头信息对象所使用的保护。
• request-no-cors: 从使用Request.mode no-cors创建的请求中获得的头信息对象所使用的保护。
• response: 从响应（Response.headers）中获取的头信息对象所使用的保护。
• immutable: 主要用于ServiceWorkers；将头信息对象渲染为只读。

注意：您不得附加或设置受request保护的头信息对象的Content-Length标头。同样，不允许将Set-Cookie插入响应头信息：ServiceWorkers不允许通过合成的响应设置Cookie。

当选项mode属性设置为no-cors时，请求头信息值是不可变的。

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

- user1526912

---

是的，但当你想要no-cors时怎么办？如何表达我想将JSON数据发送到另一个域上的端点？ - Thanasis Ioannidis

这是解决我的问题的那个。 - sayandcode

Answer 3

当你使用mode: "no-cors"时，无法设置某些头部信息。

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

- Motahhar Mokfi

---

谢谢你的提示。"no-cors" 模式是我的问题所在。 - Scoutman