環境

順平網站制作公司哪家好，找創新互聯建站！從網頁設計、網站建設、微信開發、APP開發、響應式網站開發等網站項目制作，到程序開發，運營維護。創新互聯建站從2013年創立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯建站。

前端：uni-app

后端：thinkphp6

在做前端登錄頁面時，想在登錄頁面調用后端thinkphp6的驗證碼功能，于是嘗試前端通過后端的api接口獲取captcha的圖片地址。嘗試的方法是設置后端的api方法getCaptcha，在方法中通過調用captcha_src()后，可以獲得圖片地址，然后再返回給前端調用，可以正常顯示驗證碼圖片。但是問題來了，登錄時總是提示驗證碼不正確。后來經過對比發現所獲得的驗證碼的sessionID與我登錄提交時的sessionID不一致，所以導致驗證不通過。

為什么前端通過img標簽的src地址指向thinkphp6的驗證碼地址時，后臺所生成的sessionID與我在當前頁面操作時所生成的sessionID不一樣呢，這個機制目前還是搞不明白。

后來看到captcha類內有直接生成驗證碼的方法create()，經測試通過api調用此方法可以生成驗證碼并且sessionID與我后續登錄時的sessionID一致，但是又遇到另一個問題，此create()方法是返回response方法的，前端的uni.request是無法獲取的，導致驗證碼圖片是無法顯示的。經過思考，確定對captcha類進行修改，把create()方法修改為另一個新的方法，該方法返回的是生成后的驗證碼的base64編碼，然后再把該字符串結果返回前端，最終前端可以正常顯示與驗證登錄了。

具體代碼如下：

1. 新增captcha類的方法createApi(),該方法其實就是create()的復制，只是把返回的修改如下：

$base64_data = 'data:image/png;base64,' . base64_encode($content);//合成圖片的base64編碼return $base64_data;2. api方法調用返回public function getCaptcha(){ $captcha = Captcha::createApi(); return apiResultShow(config("status.success"),lang("success"),$captcha); }

3. 前端接收展示驗證碼

<view @click="getCaptcha()"><captcha-img :captchaSrc="captchaSrc" ></captcha-img></view>........................................getCaptcha(){var request_data = {};var sign = this.sign(request_data);uni.request({ url: '/url/api/member/getCaptcha', data: { sign:sign},method: 'POST',header:{"Content-Security-Policy": "upgrade-insecure-requests","X-Requested-With": "XMLHttpRequest",},dataType:'json', success: (res) => {if(res.data.status == 0){var img_src = res.data.result;this.captchaSrc = img_src;}else{this.captchaSrc ="";} }});},

推薦：《最新的10個thinkphp視頻教程》

分享文章：前端怎么調用后臺tp6驗證碼
當前鏈接：http://vcdvsql.cn/article30/chchso.html

成都網站建設公司_創新互聯，為您提供域名注冊、外貿網站建設、手機網站建設、商城網站、外貿建站、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯