假设
前端域名为: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);
}
网友评论