Axios的两种请求类型的区别( application/json;charset=utf-8 、x-www-form-urlencoded)
前言
问:Axios中(请求头中里面的)请求类型(Content-Type)是做什么的?
答:前端在请求接口(api)服务时,需要将api所需要的参数传递给后端,那么使用何种方式传参给api,就是由请求类型定义的,请求类型就是一个规范,这个规范由后端同事在写接口时定义好的,所以前端需要请求接口时,需要保持请求类型和传参的格式与后端接口定义的一致,否则请求接口不成功!
亲身体验
1.在vue项目中使用axios请求登陆api接口时,请求返回状态码401?当时第一时间以为是token失效?想着不对劲,感觉应该是参数问题,仔细对比后未果,
2.将问题反馈给后端同事,后端同事让我这边截图下api的请求头,最后发现我这边的请求类型与后端那边接口的请求类型不一致,后端接口请求类型:x-www-form-urlencoded类型,而我这边 :application/json;charset=utf-8(注:axios默认的请求类型)
3.将项目中axios的默认请求类型修改成x-www-form-urlencoded类型,修改传参格式(浏览器url传参方式:api名称后,使用?拼接参数,例如:‘xxx/api/login?username=’+name+’&password=’+u_password)。
3.1 如何修改axios的默认请求类型?
3.1.0 全局修改:
vue项目main.js入口文件中,引入axios后:axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
3.1.1 单个请求内修改: {headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}
3.1.2axios.create里面定义对象,然后去对象下的headers下赋值即可!
结语
1.Content-Type: application/x-www-form-urlencoded:注意关键字urlencoded,浏览器url传参方式,一般使用?拼接参数,
2.Content-Type: application/json :注意关键字JSON,一般前端传参(参数的格式):对象类型
记住一句话:请求类型对应的传参格式是不一样,所以修改请求类型后,也要注意修改传参格式!
更多推荐
所有评论(0)