使用fetch post json数据的问题

场景

在项目中使用fetch框架，向一个服务器发送JSON数据，请求方式为post

let myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
let request = new Request('./api', {
       method: 'POST', 
       mode: 'no-cors',
       body:JSON.stringify(tubState),
       headers:myHeaders
});
fetch(request)
   .then(response => response.json())
   .then(result =>{
   })
 }

将mode设置为no-cors 是指不允许发送跨域请求。执行以上代码后，得到以下报错信息：

两个报错信息，第一个提示：数据类型不支持
第二个提示：不是JSON数据

原因

经过排查发现是如下原因导致：

在使用fetch时，如果设置mode : 'no-cors' 将会导致 request Header 不可变，也即不可设置。从第二张截图中我们发现，content-type 属性为text/plain, 而并非是我们所设置的application/json.所以也就产生了第二个报错信息。

问题的解决方法是：将mode 设置为 cors 即可

注意：在使用fetch post json 数据时，body字段应该使用JSON.stringify 序列化

---

2-25日补充：

fetch credentials

fetch请求默认是不带cookie 的，如果服务端需要接受cookie 做登陆验证的话，需要设置参数credentials : fetch(url, {credentials: 'include'})

credentials枚举属性决定了cookies是否能跨域得到。这个属性与XHR的withCredentials标志相同，但是只有三个值，分别是omit（默认）,same-origin以及include

Reference

fetch MDN document

Github issue

关于cors 以及 fetch

传统AJAX已死fetch永生

fetch web请求实践
fetch