Fetch: POST JSON数据

我试图使用fetch POST一个JSON对象。

根据我的理解，我需要将一个字符串化的对象附加到请求的主体，例如:

fetch("/echo/json/",
{
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })

当使用jsfiddle的JSON回显时，我希望看到我发送的对象({a: 1, b: 2})回来，但这不会发生- chrome devtools甚至不显示JSON作为请求的一部分，这意味着它没有被发送。

当前回答

它可能对某些人有用:

我遇到的问题是，formdata没有为我的请求发送

在我的案例中，是以下标题的组合也导致了这个问题和错误的Content-Type。

我和请求一起发送了这两个头文件当我删除了工作的头文件时它并没有发送formdata。

"X-Prototype-Version": "1.6.1"， "X-Requested-With": "XMLHttpRequest"

另外，其他答案表明，Content-Type头需要正确。

对于我的请求，正确的Content-Type头是:

“内容类型”:“应用程序/ x-www-form-urlencoded;charset = utf - 8”

所以底线是，如果你的formdata没有附加到Request，那么它可能是你的header。试着减少标题，然后一个一个地添加它们，看看你的问题是否得到解决。

2018-03-12 16:47:07

其他回答

您可以使用fill-fetch，这是fetch的扩展。简单地说，你可以像下面这样发布数据:

import { fill } from 'fill-fetch';

const fetcher = fill();

fetcher.config.timeout = 3000;
fetcher.config.maxConcurrence = 10;
fetcher.config.baseURL = 'http://www.github.com';

const res = await fetcher.post('/', { a: 1 }, {
    headers: {
        'bearer': '1234'
    }
});

2020-08-25 03:34:31

如果您的JSON负载包含数组和嵌套对象，我将使用URLSearchParams和jQuery的param()方法。

fetch('/somewhere', {
  method: 'POST',
  body: new URLSearchParams($.param(payload))
})

对于您的服务器，这将看起来像一个标准的HTML <form>被post。

2018-09-07 17:53:05

我认为你的问题是jsfiddle只能处理表单url编码的请求。但是让json请求的正确方法是将正确的json作为body传递:

fetch (https://httpbin.org/post, { 方法:“文章”, 标题:{ 'Accept': 'application/json, text/plain， */*'， “内容类型”:“application / json” }，身体:JSON。stringify({a: 7, str: 'Some string: &=&'}) })。然后res => res.json()) .then(res => console.log(res));

2017-02-27 18:20:17

有同样的问题-没有身体从客户端发送到服务器。添加内容类型头为我解决了这个问题:

var headers = new Headers();

headers.append('Accept', 'application/json'); // This one is enough for GET requests
headers.append('Content-Type', 'application/json'); // This one sends body

return fetch('/some/endpoint', {
    method: 'POST',
    mode: 'same-origin',
    credentials: 'include',
    redirect: 'follow',
    headers: headers,
    body: JSON.stringify({
        name: 'John',
        surname: 'Doe'
    }),
}).then(resp => {
    ...
}).catch(err => {
   ...
})

2017-10-21 07:27:12