寶塔插件vue開發踩坑 FormData、CSRF

前言

一号坑 js檔案404

二号坑 CSRF

三号坑 普通ajax送出背景無法擷取到資料

最近開發了幾個寶塔插件，後端都是使用寶塔官方标準python+shell腳本編寫，寶塔官方demo前端是簡單html的，之前有引入vue.js方法開發但是html檔案到最後3000多行emmmm，開發中有時候為了改一個小小的地方滑鼠滑到頭然後又要滑到尾感覺開發起來不是很便利是以最近想改造一下使用vue-cli作為前端展示。但是中途遇到了一個又一個坑，最終還是一一解決。

剛剛開始vue搭建很順利，npm run dev 也能正常通路，但是當我打包後放到伺服器問題來了，首先是報一個jqruey錯誤，重新打包幾次後發現多了一個錯誤那就是所有js檔案都是404，沒辦法各種百度各種折騰。搞了好幾個小時最後想到會不會是vue打包輸出路徑配置問題（先不考慮JQ報錯），抱着試一試的心态改了一下配置檔案果然有效。【最後JQ報錯問題也不見了一鍵解決啊】

配置修改詳情：

當我配置一切都完成的時候，二号坑來了，那就是請求的時候會提示 CSRF驗證失敗，請重新登入寶塔，這個是CSRF防跨站的token配置，本來以為有laravel開發的基礎這個東西應該不是很難，結果各種百度各種搜尋還是沒有找到正确的答案，最後扒了寶塔官方的public.js檔案找到了解決方法。其他網站一般隻驗證一個token 但是寶塔後端會驗證2個，我在沒有扒官方源碼的時候隻通過cookies方法拿到cookie-token 最後才知道還有一個叫http-token的東西是輸出到頁面上的，需要使用js讀取過來。最終的解決方案如下，在axios的http請求攔截器中擷取一下cookie-token和http-token然後寫到預設請求頭裡即可。

當一切都就緒的時候，該請求背景api了之前都是使用JQ請求的，vue裡當然要使用axios請求後端，是以老代碼複制過來進行了一些改造，然後測試，但是遇到一個有史以來最大的坑那就是前台使用axios發起post請求後背景死活接受不到前台傳過去的值，各種百度無解，最後自己仔細對比了一下請求資訊才發現寶塔底層封裝的JQ發起的請求和我的axios請求post格式不一樣，他們的請求使用的是form-data方式，而我的axios請求始終是Request Payload方式很蒙圈，各種查閱資料别人說的什麼qs方法什麼修改配置方法都試過了無解。

折騰了5個多小時，實在是坑死人不償命。最後靈機一動想到一個簡單的捷徑，那就是封裝一個方法将要送出的對象轉換成formdata格式，本來以為這個方法不太現實，但是當我看到背景傳回的結果時，心裡說不出來的喜悅。這種網上沒有人提到過的偏方居然也能湊效。廢話這麼多，下面把我最終解決代碼奉上。