使用fetch post json数据的问题

javascript 专栏收录该内容
42 篇文章 0 订阅

场景

在项目中使用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

  • 2
    点赞
  • 3
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值