使用axios模拟表单提交

1.需求背景

最近在实验室写一个Spring前后端分离的项目，项目中使用Spring Security组件实现系统的认证和授权，当Security的认证模式设置为FormLogin时(如下代码），前端必须要使用表单且使用POST方法提交用户名和密码。否则后端无法接受前端提交的用户名和密码

http.formLogin()  //表单提交用户名和密码，且为POST

2.解决方法

这里介绍两种解决方法，第一种是老实地写一个表单提交(注意一定要使用POST请求)。第二种是使用axios模拟表单提交。

2.1表单提交

这种相信各位都会，就不赘述了。

2.2使用axios模拟表单请求

第一步：设置请求头Cotent-Type，这个必须要设置

headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}

第二步：设置格式化函数，将数据对象设置为类似为username=admin&password=123456这种类型

const transFun =(data = {}) => Object.entries(data).map(ent => ent.join("=")).join("&")
export const login = (user) => {
    return request({
        method: "POST",
        headers: {
            // 设置提交数据格式
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        url: '/login',
        //设置序列化请求函数
        transformRequest: transFun
        data: user
    });
}

或者不用格式化函数使用FormData对象

export const login = (user) => {
    //使用FormData
    let data = new FormData();
    data.append("username",user.username)
    data.append("password",user.password)
    return request({
        method: "POST",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        data: data
    });
}

总结：以上两种模拟Form表单的请求，都要设置Cotent-Type类型和POST请求