使用fetch post json数据的问题
来源:互联网 发布:淘宝怎么发布宝贝 编辑:程序博客网 时间:2024/05/21 16:30
场景
在项目中使用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请求实践
1 0
- 使用fetch post json数据的问题
- tornado AsynHTTPClient.fetch() 发送POST json数据
- React Native用fetch获取Json数据的问题
- Retrofit2+RxJava2 使用POST方式提交JSON数据,服务器无法解析的问题
- 如何处理post请求方JSON数据传递的问题
- fetch post application/json 传递复杂类型
- fetch获取解析json数据
- Android Post Json数据乱码问题
- 使用json往返传输数据 post方法
- 使用Volley提交Json数据post
- 使用Retrofit通过post提交Json数据
- java使用https post发送json数据
- 使用jQuery POST提交数据返回的JSON是字符串不能解析为JSON对象
- 使用jQuery POST提交数据返回的JSON是字符串不能解析为JSON对象
- 使用jQuery POST提交数据返回的JSON是字符串不能解析为JSON对象
- fetch 请求数据 以及 node 后端 post请求获取不到数据的记录
- 使用HttpClient的post提交数据遇到的问题
- php接收post的json数据【转载】
- Android Studio与Unity的交互出现的错误
- 浅谈Django的Q查询以及AngularJS的Datatables分页插件
- 服务降级背后的技术架构设计
- 王垠:完全用Linux工作 (转载)
- 高性能高并发系统的稳定性保障
- 使用fetch post json数据的问题
- 分布式服务框架 Zookeeper -- 管理分布式环境中的数据
- java第十天
- 树莓派pi3 串口问题的解决办法
- 修改网口速度mii-tool和ethtool
- 京东大促备战思路和方法2.0解密
- asp.net <%%>&<%#%>&<%=%>&<%@%>&<%$%>区别
- tomcat的url-pattern的源码分析
- 大数据入门:各种大数据技术的介绍