AJAX跨域访问的三种解决方案：代理、JSONP与XHR2

域：域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”，这一点不是WIN2K所独有的，但活动目录可以贯穿一个或多个域。在独立的计算机上，域即指计算机本身，一个域可以分布在多个物理位置上，同时一个物理位置又可以划分不同网段为不同的域，每个域都有自己的安全策略以及它与其他域的信任关系。当多个域通过信任关系连接起来之后，活动目录可以被多个信任域域共享。

AJAX跨域问题的产生原因

在实际开发中，常需通过AJAX请求其他域名下的资源，但通常会遭遇“拒绝访问”错误。这是由于浏览器的同源策略限制，出于安全考虑，AJAX默认只能访问与当前页面同源的本地资源，禁止跨域访问。

例如，若网站域名为aaa.com，尝试通过AJAX请求bbb.com域名的内容，浏览器会判定该操作不安全并拒绝访问。

以下情况均会触发跨域限制：

跨域解决方案概述

针对此问题，后端通常采用三种解决方案：代理（Proxy）、JSONP以及XHR2（XMLHttpRequest Level 2）。

方案一：后端代理

第一种方案是代理。该方法由后端（如ASP、PHP、Java、ASP.NET等）获取目标域名的内容，再将结果返回给前端。由于前端与后端处于同一域名下，从而规避了跨域限制。

具体实现代码如下：创建一个AJAX请求，页面地址为http://localhost/ajax/proxy.html。

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男"); 

首先创建AJAX请求对象。

后端proxy.php代码逻辑如下：

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents; 

该PHP代码用于获取localhost:63342下的proxy.js文件内容。

proxy.js返回的数据格式如下：

{
name : "吕铭印",
sex : "男"
} 

proxy.html运行后的显示结果如图所示。

至此，通过代理方式成功实现了不同域之间文件的访问。

具体流程为：proxy.html通过AJAX访问后端proxy.php；proxy.php接收到请求后，去访问localhost:63342中的proxy.js文件；获取到proxy.js的内容后，将其返回给前端页面，从而完成跨域功能。

若需访问多个跨域文件，可将目标文件的地址作为参数传递给后端proxy.php进行处理。

方案二：JSONP

第二种方案是JSONP（仅支持GET请求）。开发者发现，通过script标签调用JS文件时不受跨域限制，由此衍生出此方案。

其核心思路是：在远程服务器端将数据封装在JS文件中，供客户端调用及进一步处理。

前端jsonp.html的实现代码如下：

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}

后端jsonp.php的处理逻辑如下：

$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})"; 

jsonp.html运行后的结果如图所示。

实现原理在于：利用script标签加载远程JS文件不受跨域限制的特性，通过动态创建script标签，并利用其src属性访问远程文件。

需要注意的是，JSONP并不属于标准的AJAX技术，但它可以实现类似AJAX的数据交互功能。

方案三：XHR2

第三种方案是XMLHttpRequest Level 2（XHR2）。HTML5提供的XHR2标准已实现跨域访问及其他新功能。

这需要在远程服务器端添加特定的响应头代码：

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET'); 

配置好服务器端后，客户端即可使用常规的AJAX代码进行跨域请求。

三种方案对比总结

总结而言，代理方案实现较为繁琐，但兼容性最好，支持AJAX的浏览器均可使用。

JSONP方案相对简单，但仅支持GET请求方式。

XHR2方案实现最简单，但仅支持HTML5浏览器。若进行移动端开发，推荐优先使用XHR2。

以上介绍了AJAX实现跨域的三种方法（代理、JSONP、XHR2），希望对开发者有所帮助。