前后端分离项目的验证码实现（前端Vue，后端TP）

vue

1.TP安装依赖

composer require topthink/think-captcha=2.0.*

2.生成验证码返回给前端

// 生成验证码

public function getCaptcha()

{

$config = [

// 验证码字符集合

'codeSet' => '0123456789',

// 验证码字体大小

'fontSize' => 30,

//字体

'fontttf' => '5.ttf',

// 验证码位数

'length' => 4,

// 背景颜色

'bg' => [119, 136, 153]

];

$captcha = new Captcha($config);

return $captcha->entry();

}

3.前端接收

前端调接口获取验证码时请求方法的responseType要设置成'arraybuffer'

export function getCaptcha (data, responseType = 'arraybuffer') {

return fetch({

url: 'login/getCaptcha',

method: 'get',

data,

responseType

})

}

再通过下面的操作转为图片url

let imgURL = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))转换成图片url

注意点：

验证码的验证依赖于session，默认跨域无法传递cookies也就无法传递session_id，导致验证码验证一直是错误的

解决:

后端设置(Access-Control-Allow-Origin如果设置为*的话，即使你的XHR设置了Credentials为true游览器也不会发送cookies)

前端设置