thinkphp5 跨域验证码

2019-08-16 本文已影响0人小菜攻城狮

假设

前端域名为:http://a.com

服务端域名为:http://b.com

前端页面地址为：http://a.com/index.html

获取验证码地址：http://b.com/home/verify

验证验证码地址：http://b.com/home/check_verify

事例：前台地址http://a.com要向服务端地址http://b.com验证和请求验证码

跨域服务端php必须要设置header

header('Access-Control-Allow-Credentials: true');//服务器端要通过在响应 header 中设置Access-Control-Allow-Credentials = true来运行客户端携带证书式的访问
header('Access-Control-Allow-Origin: http://a.com'); //当服务器端 Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin 的值不能为 '*'，建议尽量指定请求域名 。

前端页面代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-test</title>
</head>
<body>
    <img id="img" src="http://b.com/home/verify" />
    <input type="text" name="code" />
    <div id="J_AjaxTest">提交</div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $('#J_AjaxTest').bind('click', function(event) {
                var code = $("input[name='code']").val();
                $.ajax({
                    url: 'http://b.com/home/check_verify',
                    type: 'GET',
                    xhrFields: {
                        withCredentials: true // 验证请求最重要的一段代码，这里设置了withCredentials为true
                    },
                    data: {code: code},
                    success : callback
                })
            });
            function callback (obj){             
                console.log(obj);
            }
        })
    </script>
</body>
</html>

完成验证

原理：因为在加载验证码图片的时候请求中携带了cooike，cooike中存了服务端验证码的PHPSESSID。而在验证过程中因为是跨域请求，ajax是不会携带cooike进行提交的。因此需要在ajax设置withCredentials为true时表示当前请求为跨域类型在请求中协带cookie，并且服务端也必须要设置Access-Control-Allow-Credentials:为true才可以起到实际的效果。

顺便贴一下进行请求和验证的两个方法：

//获取图片验证码
public function verify(){
    $captcha = new Captcha();
    return $captcha->entry();
}

//验证提交验证码信息是否正确
function check_verify( ){
    $code = input('code');
    $captcha = new Captcha();
    return $captcha->check($code);
}

thinkphp5 跨域验证码

猜你喜欢

热点阅读