这两天在做公司的PC站时因为需要使用angular的$http服务存取数据,而且接口又在另一个域名下面,不得不研究下跨域的问题. 以下把这两天遇到的一些问题总结下.(都是我自己遇到的一些问题, 所以可能不太全面)
Access-Control-Allow-Origin的问题
跨域遇到的第一个问题就是Access-Control-Allow-Origin的错误, Chrome报错Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.. 即当前发出请求的域名不在服务器的白名单中, 怎么办呢?
当然,最简单的方法就是在被访问的服务端返回的内容上面加上Access-Control-Allow-Origin响应头, 值为*或是当前网站的域名. 使用*的话虽然方便, 但容易被别的网站乱用,总归有些不太安全; 设置为当前网站的域名的话又只能设置一个. 我的解决办法是设置一个允许的域名白名单, 判断当前请求的refer地址是否在白名单里,如果是,就设置这个地址到Access-Control-Allow-Origin中去,否则就不设置这个响应头.
以下是整理后的代码(实际的白名单列表是写在配置文件中的):
trait ApiTrait
{
protected $_ALLOWED_ORIGINS = [
'test.icewingcc.com'
];
protected function render_json($status = 200, $data = [], $message = '')
{
$cross_origin = $this->_parse_cross_origin_domain();
if($cross_origin){
@header("Access-Control-Allow-Origin: {$cross_origin}");
}
echo json_encode([
'status' => $status,
'data' => $data,
'message' => $message
]);
}
private function _parse_cross_origin_domain()
{
$refer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
$refer = strtolower($refer);
if(! $refer){
return FALSE;
}
$refer_parts = parse_url($refer);
if(! $refer_parts){
return FALSE;
}
$host = isset($refer_parts['host']) ? $refer_parts['host'] : '';
$scheme = isset($refer_parts['scheme']) ? $refer_parts['scheme'] : 'http';
if(! $host){
return FALSE;
}
if(in_array($host, $this->_ALLOWED_ORIGINS)){
return ($scheme ? : 'http') . '://' . $host;
}
return $host;
}
}
Access-Control-Allow-Headers的问题
以过上面的代码已经实现了跨域中的第一步,GET请求一切正常. 可是需要POST请求发送数据时又出问题了, Chrome报错Request
header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 查了下资料,大致意思是请求头中的Content-Type字段内容没有在Access-Control-Allow-Headers中被设置为允许.
这个简单,只需要把这个内容加在Access-Control-Allow-Headers上面就行了,顺便也把其它常用的头都加进去吧.
@header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie');
搞定.
cookie的问题
用户登录时的POST表单发送问题解决了,紧接着又出现了另一个问题: 系统是通过cookie与后端交互的,而这样跨域时每次请求都是独立的,都会生成不同的cookie. 而cookie里面保存了PHP的session id的信息,自然就无法顺畅的与后端进行交互.
这个处理起来似乎比较麻烦,过程就不说了,最终找到的解决方案是在PHP中再加一个header, 同时JS里也要设置一下:
@header('Access-Control-Allow-Credentials: true');
JS里面也要设置Credentials, 下面是angular的代码, jQuery类似:
$http({
withCredentials: true
});
如此一来便解决了跨域时cookie的问题.
OPTIONS请求
以上问题都解决了, 基本上跨域已经搞定, 但仔细看Chrome的Network日志, 发现有些请求会出现两次: 第一次是OPTIONS请求方式, 第二次才是正常的POST. 这个OPTIONS是干嘛的呢?
查了些资料并且测试了下, 发现OPTIONS就是相当于在正式请求接口之前去获取以下header, 自然就是我们前面所设置的那些header. 如果在这次OPTIONS请求中服务器有返回正确的header, 这时才会执行后面真正的请求; 否则请求将会被拒绝, 并抛出错误.
即然这次OPTIONS请求仅仅是为了获取header的, 那么给它一个空的返回就行了呗, 不需要做任何实际的操作.
if(isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
$this->render_json([]);
exit();
}
完整代码
下面贴上修改后的完整PHP部分代码, JS就不贴了,加一个参数而已. 仅供参考:
trait ApiTrait
{
protected $_ALLOWED_ORIGINS = [
'test.icewingcc.com'
];
protected function render_json($status = 200, $data = [], $message = '')
{
$cross_origin = $this->_parse_cross_origin_domain();
if($cross_origin){
@header("Access-Control-Allow-Origin: {$cross_origin}");
}
@header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie');
@header('Access-Control-Allow-Credentials: true');
@header('Content-type: application/json');
@header("Cache-Control: no-cache, must-revalidate");
echo json_encode([
'status' => $status,
'data' => $data,
'message' => $message
]);
}
private function _parse_cross_origin_domain()
{
$refer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
$refer = strtolower($refer);
if(! $refer){
return FALSE;
}
$refer_parts = parse_url($refer);
if(! $refer_parts){
return FALSE;
}
$host = isset($refer_parts['host']) ? $refer_parts['host'] : '';
$scheme = isset($refer_parts['scheme']) ? $refer_parts['scheme'] : 'http';
if(! $host){
return FALSE;
}
if(in_array($host, $this->_ALLOWED_ORIGINS)){
return ($scheme ? : 'http') . '://' . $host;
}
return $host;
}
}
abstract class BaseApiControl
{
use ApiTrait;
protected function __construct()
{
if(isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
$this->render_json([]);
exit();
}
}
}
目前为止接口运行良好, 再发现新的坑时将会更新此文章. (ps. 虽然这是篇前端分享的文章, 却是用一大堆PHP解决问题...)
