fetch 跨域POST提交，程序接收不到数据？

//jQuery 跨域POST可以正常提交和接受数据
$.post("http://127.0.0.1:3000/api/test", { name: "John", time: "2pm" },function(argument) {
    console.log(argument);
});

// fetch 使用了这个 https://github.com/github/fetch，后台程序接收不到数据，该如何设置？
fetch('http://127.0.0.1:3000/api/test', {
      method: 'POST',
      mode: "no-cors",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: 'Hubot',
        login: 'hubot',
      })
    });

改为同源（如下）是ok的，问题的应该是在跨域上

fetch('/api/test', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

截图在这里，按照console的错误提示添加 mode: "no-cors"后，可以正常发送请求

接收不到post值

javascript fetch

阅读 21k

8 个回答

rozbo

✓ 已被采纳

你这样向服务器提交的可是一个json数据，而不是传统的formdata，而jquery的可是会自动帮你转成formdate的。问题极有可能出现在这里。
我怎么没找到有mode这个option，而且no-cors不是不跨域的意思吗？
你可以这样试试:

fetch('http://127.0.0.1:3000/api/test', {
      method: 'POST',
      body: "name=Hubot&login=hubot"
    });

苍山暮色烟雨迟

2201677105

发布于
2020-03-26

qs.stringify 不要用 JSON.stringify

直接上代码吧

fetch('https://api.github.com/users/github', {
    method: 'GET',
    headers: {
      'Accept': 'application/json, text/javascript, */*; q=0.01',
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    mode: 'cors',
    credentials: 'credentials',
    cache: 'default'
  })
  .then((resp) => {
    try {
      return resp.json();
    } catch (err) {}
    return resp.text();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

cors是表明可否通过header跨域。
credentials表明是否在跨域的时候可以传数据，比如cookie等信息。
credentials为真的时候，服务段不能用*来匹配，必须要指定一个完整的域信息