0%

服务端解决跨域问题

发表于 更新于 分类于 Disqus：
本文字数： 2.9k 阅读时长 ≈ 5 分钟

服务端解决跨域问题

跨域请求数据时会提示如下错误信息:

JSONP实现跨域请求请移步至 Post not found: dd976ae 这里 .

服务器端指定 Access-Control-Allow-Origin 可跨域访问的域

1
2
3
4
5
6
7
8
header('content-type:application:json;charset=utf8');  
header('Access-Control-Allow-Origin:*');  
$data = array(
    'hello' => 'codezm',
    'data' => $_GET['data'],
);
echo json_encode($data);
exit;

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名
例如：header(‘Access-Control-Allow-Origin:http://www.client.com');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
header('content-type:application:json;charset=utf8');  
  
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
  
$allow_origin = array(  
    'http://www.client.com',  
    'http://www.client2.com'  
);  
  
if(in_array($origin, $allow_origin)){  
    header('Access-Control-Allow-Origin:'.$origin);  
    header('Access-Control-Allow-Methods:POST');  
    header('Access-Control-Allow-Headers:x-requested-with,content-type');  
}  
  
echo json_encode($ret);  
exit;

引申问题

Question One:

若服务器端判断是否是 ajax 请求，然后再处理的请求数据:

1
2
3
4
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
    && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $getAllData = $_POST;
}

客户端需添加 ajax 请求参数:

1
2
3
4
5
6
7
8
9
10
$.ajax({
    type: "POST",
    url: "http://www.server.com/test.php",
    dataType: 'json',
    headers: {'X-Requested-With': 'XMLHttpRequest'}, 
    data: {'data':'222'},
    success: function(data){
        console.log(data);
    }
});

OR 

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    type: "POST",
    url: "http://www.server.com/test.php",
    dataType: 'json',
    data: {'data':'222'},
    beforeSend : function (XMLHttpRequest) {
        XMLHttpRequest.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest");
    },
    success: function(data){
        console.log(data);
    }
});

Question Two:

两次请求? 如何在服务器端将第一次预检测请求 kill 掉？

1
2
3
if (strtolower($_SERVER['REQUEST_METHOD']) == 'options') {
    exit;
}

Qusetion Three:

如何传递 Cookie?

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type: "POST",
    url: "http://www.server.com/test.php",
    dataType: 'json',
    headers: {'X-Requested-With': 'XMLHttpRequest'}, 
    xhrFields: {withCredentials: true},
    data: {'data':'222'},
    success: function(data){
        console.log(data);
    }
});

服务器端必须指定 Access-Control-Allow-Origin: http://www.baidu.com 具体的域名, 如使用 Access-Control-Allow-Origin: * 会提示错误信息

1
2
3
4
5
6
7
// Chrome network Disable cache 可以禁止此项使用.
header('Access-Control-Max-Age:86400');

if(isset($_SERVER['HTTP_ORIGIN'])) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);  
    header("Access-Control-Allow-Credentials: true");
}