使用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請求