Php Ajax 跨域解决方案

发表于 | 分类于

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的数据。

在多项目协同开发中，难免会有跨域请求数据的可能。

就算在同一个域名下的不同端口发出请求也会出现跨域的问题。

使用Header来解决：

通过设置Access-Control-Allow-Origin，来实现跨域请求。

在Header的解决方案中可以允许某一个或多个其他域名发送的请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
	//设置字符集：
	header("Content-Type: application/json; charset=UTF-8");

	//允许单个域名的跨域请求：
	header('Access-Control-Allow-Origin:http://client.jenkiHuang.com');

	//允许多个域名的跨域请求：
	$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; 

	$allow_origin = array(  
	    'http://client1.jenkiHuang.com',  
	    'http://client2.jenkiHuang.com'  
	);  
	  
	if(in_array($origin, $allow_origin)){  
	    header('Access-Control-Allow-Origin:'.$origin);       
	} 

	//允许所以域名的跨域请求：
	header('Access-Control-Allow-Origin:*'); 

	echo '{"records":[{"Name":"jenkiHuang","City":"ChangSha"}]}';
?>

使用Ajax的JSONP来解决
Jsonp 返回的是一个函数，函数的参数就是数据集。

1
2
3
4
<?php
	header("Content-Type: application/json; charset=UTF-8");
	echo $_GET['callback'] . '(' . "{'name' : 'jenkiHuang'}" . ')';
?>

然后使用下面的异步请求方式来进行数据请求，注意其中的dataType类型为jsonp，不然还是会出现跨域的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var url = "http://localhost/jsonp/?callback=?";
$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
        console.dir(json);
    },
    error: function(e) {
        console.log(e.message);
    }
});