環(huán)境

順平網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

前端：uni-app

后端：thinkphp6

在做前端登錄頁(yè)面時(shí)，想在登錄頁(yè)面調(diào)用后端thinkphp6的驗(yàn)證碼功能，于是嘗試前端通過(guò)后端的api接口獲取captcha的圖片地址。嘗試的方法是設(shè)置后端的api方法getCaptcha，在方法中通過(guò)調(diào)用captcha_src()后，可以獲得圖片地址，然后再返回給前端調(diào)用，可以正常顯示驗(yàn)證碼圖片。但是問(wèn)題來(lái)了，登錄時(shí)總是提示驗(yàn)證碼不正確。后來(lái)經(jīng)過(guò)對(duì)比發(fā)現(xiàn)所獲得的驗(yàn)證碼的sessionID與我登錄提交時(shí)的sessionID不一致，所以導(dǎo)致驗(yàn)證不通過(guò)。

為什么前端通過(guò)img標(biāo)簽的src地址指向thinkphp6的驗(yàn)證碼地址時(shí)，后臺(tái)所生成的sessionID與我在當(dāng)前頁(yè)面操作時(shí)所生成的sessionID不一樣呢，這個(gè)機(jī)制目前還是搞不明白。

后來(lái)看到captcha類(lèi)內(nèi)有直接生成驗(yàn)證碼的方法create()，經(jīng)測(cè)試通過(guò)api調(diào)用此方法可以生成驗(yàn)證碼并且sessionID與我后續(xù)登錄時(shí)的sessionID一致，但是又遇到另一個(gè)問(wèn)題，此create()方法是返回response方法的，前端的uni.request是無(wú)法獲取的，導(dǎo)致驗(yàn)證碼圖片是無(wú)法顯示的。經(jīng)過(guò)思考，確定對(duì)captcha類(lèi)進(jìn)行修改，把create()方法修改為另一個(gè)新的方法，該方法返回的是生成后的驗(yàn)證碼的base64編碼，然后再把該字符串結(jié)果返回前端，最終前端可以正常顯示與驗(yàn)證登錄了。

具體代碼如下：

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

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

3. 前端接收展示驗(yàn)證碼

........................................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個(gè)thinkphp視頻教程》

當(dāng)前文章：前端怎么調(diào)用后臺(tái)tp6驗(yàn)證碼
轉(zhuǎn)載源于：http://weahome.cn/article/chchso.html