跨域请求接口以及设置读取cookie

2016-08-06

跨域请求接口以及设置读取cookie

正在做的一个项目遇到了跨域请求ajax接口同时需要设置和读取cookie的问题，简单来说就是有个h5端页面，域名如：m.example.com，需要异步请求api.example.com下的接口获取验证码，一般验证码都是会把code记录到cookie里的，此时就会遇到问题：api.example.com域名下的接口都会将cookie写在api这个二级域名下，这样势必需要在检查验证码的接口时跨域去读取api域名下的cookie了。

一般通用有两种做法来做到跨域请求读取cookie数据：

1.发起crossdomain的ajax请求，这个需要服务端的头信息申明来配合

2.使用jsonp

1.crossdomain方法

举例api.example.com/generate_verify_code接口为生成验证码图片的接口，在这个接口里会有一个动作是将验证码的值写入cookie，此时可以将这个cookie的domain设置为.example.com父级域名，以便子域名都可以读到。

setcookie($name, $value, time()+3600, '/', '.example.com', false);

另有一个接口api.example.com/check_verify_code用于判断验证码是否正确，前端发起异步请求时带上crossdomain的信息：

crossdomain: true,
xhrFields: {
    withCredentials: true
}

后端接口里可以设置返回头信息：

header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: http://api.example.com'); //请求源的控制
//code to process verify code
//....
//return

2.jsonp方法

jsonp的原理大意就是<script>标签引用的文件不受同源策略控制，可以在<script>标签中引用另一个域的json数据，p的意义就是Padding，将json数据包裹在一个callback中返回给请求源，这样在前端就可以直接执行这个callback方法对返回过来的json数据进行处理了。

jquery可以很方便地发起jsonp请求，可以在构造$.ajax对象里申明下需要使用jsonp方法：

dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'success_callback',

然后后端直接调用当前域的cookie信息返回就行了，比第一种方法简单些。

3.为什么要跨子域？

单点登录的实现一般都是靠跨子域设置cookie来实现的，多个二级应用（一般也是多个二级子域名）之间共享用户中心，如member.example.com，在不同子域名下登录后统一在用户中心member域名下设置cookie；然后也统一从member获取用户登录信息，这里就使用到了跨域读写cookie。

Blog

Articles

我欢喜你