场景

在项目中使用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日补充：