axios异步提交表单数据的几种方法

踩Axios提交表单的几种形式

前端和后端是分开的。前端使用的vue和后端的安全模块使用的SpringSecurity在使用postman测试后端的权限接口时都是正常的。但是，后端在使用vue axios发送异步请求时，无法获取axios提交的表单数据。爬了两个半小时的坑，我找到了答案。

axios以异步形式发文提交的数据格式与我们直接使用from form(表单数据格式)提交的数据格式不同，如下所列

默认格式请求负载

使用axios直接发送异步请求，不做任何处理的代码如下：

Const service=axios。create({ })dolo gin(POJO){ return request({ URL 3360 '/API/user/log in '，方法：' post '，数据： POJO})这样提交的表单格式默认为RequestPayload，长度如下

可以看到它的Contet-type是' content-type ' : ' application/JSON；'然而，后台的SpringSecurity并不为此结果付费，请求中也没有可以解析的数据

处理成表单数据格式

使用插件qs，安装命令如下：

Npminstall-saveqs请求代码：

const service=axios . create({ })dolo gin(POJO){ Return Request({ URL : '/API/user/log in '，method: 'post '，Data: qs.stringify(pojo) })或dolo gin(POJO)} { Return Request({ URL 3360 '/API/user/log in '，Method :' post '，Data:POJO，transformrequest 3360[function(data){ data=QS返回数据；}]，})}这样处理的表单数据看起来如下，也是最常用的表单数据格式。这种格式的数据可以从后台HttpRequest解析提交的属性。

对应于其他类型内容类型的表单数据格式

const service=axios . create({ header RS : { ' Content-Type ' : ' multipart/form-data；' charset=utf-8；'} })dolo gin(POJO){ return request({ URL : '/API/user/log in '，method:' post '，data:qs。stringfy (POJO)}}看起来是这样的

const service=axios . create({ header RS : { ' Content-Type ' : ' multipart/form-data；' charset=utf-8；'}}) doLogin (pojo) {返回请求({ url: '/api/user/login '，method: 'post '，data : POJO })}-

const service=axios . create({ header RS : { ' Content-Type ' : ' multipart/form-data；' charset=utf-8；'}}) doLogin (pojo) {返回请求({ url: '/api/user/login '，method: 'post '，data : POJO })}

const service=axios . create({ header RS : { ' Content-Type ' : ' application/x-www-form-URL encoded；' charset=utf-8；'}}) doLogin (pojo) {返回请求({ url: '/api/user/login '，method: 'post '，data : QS . stringify(POJO)})}

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。