fetch 跨域POST提交,程序接收不到数据?

caryhgq
  • 3.5k
//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"后,可以正常发送请求
clipboard.png

clipboard.png

接收不到post值
clipboard.png

回复
阅读 15.8k
8 个回答
✓ 已被采纳
  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"
    });

正如 @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 应该明显表示这个请求不跨域

我也遇到这个问题,楼主解决了么?

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

直接上代码吧

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

qs.stringify 不要用 JSON.stringify

你知道吗?

宣传栏