使用 Fetch APi 时如何设置请求头的 content-type

Posted 2023-02-19

【中文标题】使用 Fetch APi 时如何设置请求头的 content-type

【英文标题】：How to set the content-type of request header when using Fetch APi

【发布时间】：2016-11-04 12:07:07

【问题描述】：

我正在使用 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

谁能解释为什么我不能设置这个属性？

【参考方案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);

【讨论】：

这个语法没问题headers: "Content-Type": "application/json" ,

@RTS ：如果您包含凭据，这似乎不起作用。

【参考方案2】：

看完下面的文章我找到了答案：

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

警卫

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

可能的保护值是：

none：默认。 request：保护从请求中获得的标头对象 (Request.headers)。 request-no-cors：保护从使用Request.modeno-cors 创建的请求中获得的标头对象。 response：保护从响应中获得的标头 (Response.headers)。 immutable：多用于ServiceWorkers；以只读方式呈现 headers 对象。

注意：您不能附加或设置 request 受保护的标头的 Content-Length 标头。同样，不允许在响应头中插入Set-Cookie：ServiceWorkers 不允许通过合成响应设置 cookie。

When the options mode property is set to no-cors the request header values are immutable.

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

【讨论】：

是的，但是当你想要不使用cors的时候？你怎么说我想将json数据发送到另一个域的端点？