Ajax 浏览器跨域访问控制

时间 2019-11-13

标签 ajax 浏览器访问控制栏目 Ajax 繁體版

原文原文链接

一.关于跨域须要设置的响应头消息

Access-Control-Allow-Origin:*                               #容许全部主机
Access-Control-Allow-Origin:http://hello-world.example      #容许特定主机

Access-Control-Allow-Methods: POST, GET, OPTIONS            #容许跨域执行的方法

Access-Control-Allow-Headers: X-PINGOTHER，Content-Type,MyHeader                  #容许跨域设置的头信息(若是不设置，那么没法获取该值，甚至数据没法获取)

Access-Control-Max-Age: 1728000

二.关于IE8和IE9浏览器差别性说明

IE8和IE9使用新的API XDomainRequest（IE又淘气了一次，但还好IE7上能够经过ajax跨域）html

var xdr = new XDomainRequest();
   xdr.onload = function (e) { //当收到服务器响应的回调函数
            var data = $.parseJSON(xdr.responseText);
            if (data == null || typeof (data) == 'undefined') {
                data = $.parseJSON(data.firstChild.textContent);
            }
            //success
   };
  xdr.onerror = function (e) {
            //error
   }

xdr.open("GET", url); //目前只支持IE8和IE9
xdr.send();

对于webkit阵营的浏览器而言，须要使用ajax，这里咱们不在多演示，咱们将在下面作一个兼容性的例子。html5

三.为了达到兼容性的指标，咱们进行以下改造java

设立一站点 www.a.com,做为请求的clientweb

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Cross-Domain</title>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	</head>
	<body>
	<script type="text/javascript" charset="utf-8">
	var xdr = null;
	if(!!window.XMLHttpRequest)
	{
		xdr = new XMLHttpRequest();
	}
	else if( window.ActiveXObject)
	{
		try
		{ //IE7+
			xdr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) 
		{
			//IE6-
			try { xdr = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) { } 
		}
	}

	if(xdr)
	{		
        	if(!("withCredentials" in xdr) && window.XDomainRequest) 
        	{
        		xdr = new XDomainRequest();
        	}else{
        		xdr['withCredentials'] = true;
        	}
        				
        	if(window.XMLHttpRequest && (xdr instanceof XMLHttpRequest))//若是是IE6,IE7,chrome,firefox,IE10,IE11
        	{
        		xdr.open('OPTIONS', 'http://www.b.com/html5/crossdomain-server.php', true);
        	}
        	else if(window.ActiveXObject&&(xdr instanceof XDomainRequest))//若是是IE8,IE9
        	{
        		xdr.open("POST", "http://www.b.com/html5/crossdomain-server.php");
        	}
				
	
		xdr.onload = function(e) 
		{
			xdr.onReadyStateChange(arguments);  
		};

		xdr.onReadyStateChange = function(e)
		{
			if(window.console)
			{
				console.dir(xdr.responseText);
			}else{
				alert(xdr.responseText);
			}
		}
					
		 xdr.send(null);
	}
	else
	 {
		alert('Not Supported !');
	 }	

		</script>
	</body>
</html>

设立服务器站点 www.b.com/html5/crossdomain-server.phpajax

<?php
header('Content-Type:application/json;charset=utf-8');
header('Pragma:no-cache,no-store');
header('Cache-Control:no-cache,private');
header('Date:'+date('r'));
header('Connection:Keep-Alive');

header('Access-Control-Allow-Origin: http://www.a.com');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS,PUT,DELETE,HEAD');
header('Access-Control-Allow-Headers: X-PINGOTHER,Content-Type,Accept,Range');
header('Access-Control-Max-Age: 1728000');
header('Access-Control-Allow-Credentials: true');

date_default_timezone_set('Asia/Chongqing');

$data = array(
	'id'  => 'ZF1024',
	'name'=>'zhangsan',
	'token'=>uniqid()
);


echo json_encode($data);

?>

请求结果chrome

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~apache

三.html5 postMessage 进行跨域

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果同样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);  //经过这句穿透域名限制
};
</script>

b.com/index.html中的代码：

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 经过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但因为同源策略，这里event.source不能够访问window对象
        }
    }, false);

最后，你还能够经过apache服务器设置跨域json

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

参考：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m2

http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx