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

Question

//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值

Answer 1

1. 你这样向服务器提交的可是一个json数据，而不是传统的formdata，而jquery的可是会自动帮你转成formdate的。问题极有可能出现在这里。

2. 我怎么没找到有mode这个option，而且no-cors不是不跨域的意思吗？
   你可以这样试试:

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

Answer 2

Answer 3

正如 @rozbo 所说，原因就是 1。后台使用 Form 系接收是拿不到的。例如在 Java 的 Spring MVC 中。你必须在 action 的参数中声明 @RequestBody 来获取请求中的 json。而不是 @RequestParam

---

2016-08-01 18:47:39

那么能说下后台的信息么，比如后台是 NodeJS ? Python ?

还有就是可以用 Chrome 看下这个请求的，理论上如果直接使用 XmlHttpRequest 来发送跨区请求的话，浏览器本身就会报错，请求是根本发布出去的。

jQuery 的代码貌似会自己检测你的地址是否跨域，从而来选择发送请求的方式，可以参考源代码 https://github.com/jquery/jqu... 。我只简单看了下，你可以从 538 行开始看。

最后就是，你可以用 Chrome，打开控制台，同时使用这两个库发送相同的请求。然后在控制台中比较这两个请求的区别。这个应该很明显。

---

2016-08-03 13:20:58

看了 @abby_mrs 的回答，我觉得问题应该就是你的 mode 设置问题，no-cros 应该明显表示这个请求不跨域

Answer 4

我也遇到这个问题，楼主解决了么？

Answer 5

API将同源策略的值设置成*

Answer 6

直接上代码吧

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为真的时候，服务段不能用*来匹配，必须要指定一个完整的域信息

Answer 7

这个关键在服务器返回的HTTP头，客户端使用fetch不需要设置mode，你可以看下这个：CORS简单实验