楼主菜鸡一枚，最近有在学习thinkphp，看到有个图形验证码的类库captcha，故想尝试用在小程序中。

小程序wxml代码如下：

<!–pages/test/test.wxml–>

<form bindsubmit=“formsubmit”>

<input name=“code” placeholder=“请输入验证码” style=“border:1px solid black”/>

<image onload=“imageload” src="{{captchaImage}}" style=“width:200px;height:88px;” ></image>

<button form-type=“submit”>提交</button>

</form >

js代码如下：

// pages/test/test.js

Page({

data: {

captchaImage:‘https://www.st1207.com/captcha’   //验证码图片地址

},

formsubmit: function (e) {

    console.log(e.detail.value);

    var that=this;

    wx.request({

        url: “https://www.st1207.com/api/v3.captcha/index”,   //服务器验证地址

        method:“GET”,

        data:e.detail.value,

        success: function (res) {

            console.log(res.data);

        },

        fail: function (err) {

        console.log(err);

        }

    })

},

})

服务器代码如下

<?php

namespace app\api\controller\v3;

use think\Controller;

use think\captcha\Captcha as Cap;

class Captcha extends  Controller{

    public function index($code=’’){

        $captcha=new Cap;

    if(!$captcha->check($code)){

        return ‘验证失败’.$code;

    }else{

        return ‘验证成功’.$code;

    }

    }

}

?>

代码完成，开始测试，虽然验证码可以正常显示，但是提交表单进行验证的时候总是提示验证失败。

各种网络搜索查找资料，才发现thinkphp是用Session来储存验证码的。而小程序不支持主动保存cookie,更不会在request header中发送cookie。导致小程序每次向服务器发送请求的时候，SESSIONID都会发生变化，所以永远都不会验证成功。

思考解决办法：手动保存服务器response header中的sessionid,再向服务器发送验证请求的时候，在wx.request中手动添加header:{‘cookie’:‘PHPSESSID=…’ }.

1. 查看以上代码，小程序第一次向服务器发送请求是在<image>组件加载服务器验证码图片的时候，此时没有办法获得response header。所以也就不能手动保存。

2. 再想办法 ：<image>组件的src 不直接使用服务器的图形验证码地址，先在onload事件中通过wx,request或者wx.downloadFile请求服务器https://www.st1207.com/captcha, 获得response header和图片信息再通过js的data 让小程序来显示。

3. 查看wx.request 的回调函数success:function(res){ }

   

   有response header，可以获得sessionID 为  res.header['Set-Cookie'],但是返回的res.data确是一堆乱码，无法来让<image>组件进行显示

4. 查看wx.downloadFile 的回调函数虽然可以把图片下载下来进行显示，但是并不能获得response header。

作为一名菜鸟，不知道有没有表达的清楚，请各位大神帮忙看看还有没有其他办法。