用axios模拟一个form表单提交形式接口

在Vue项目中,为配合后端特定框架要求,采用axios模拟原生form表单提交,解决Content-Type不匹配问题,确保登录接口正常工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:在做项目的登录系统时,由于后端采用了一种框架,他接受登录接口必须走form表单提交的那种形式,但我们前端用的都是UI框架,很少有<form action="form_action.asp" method="get"></form>这种写法去提交表单数据,所以我们要用axios模拟一个表单提交接口。

技术:vue-cli 3.x + axios + iView

首先,我们要对Http中的Content-Type有个了解。
Content-Type 代表发送端(客户端|服务器)发送的实体数据的数据类型。

一般,我们会在axios做拦截的时候默认设置,Axios.defaults.headers['Content-Type'] = "application/json",这时我们要发送浏览器的原生 form 表单形式的数据时,就会有问题;

解决方法:
最主要的一点是要设置Content-Type:浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
设置Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded',此时方法中传递的参数会有问题需要用qs.stringify包一下,需要引入qs,params = qs.stringify(params)即可。

以上操作的文件是axios公共的拦截文件,所以不应该直接修改Axios.defaults.headers['Content-Type'],这样会影响其他使用axios的方法,这时,可以对axios进行封装,通过具体的方法传不同的’Content-Type’来满足不同的需求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值