跨域问题

标签：使用方法   出错   响应   发送   figure   div   ESS   highlight   xmlhttp   

当我们在页面中通过ajax 请求其他服务器数据时，由于浏览器对于JavaScript的同源策略，客户端就会发生跨域问题。所谓同源策略，指的是一段脚本只能请求来自相同来源（相同域名，端口号，协议）的资源。
如果上面XMLHttpRequest请求的服务地址与当前文件不同源的话，浏览器就会出现错误：
那么如何解决这类跨域问题？
（1）利用CORS跨域
“跨域资源共享”（Cross-origin resource sharing,简称CORS）。CORS是在XHR2中拓展能力，使用方法很简单，在服务端设置：
Header set Access-Control-Allow-Origin *
这种设置将接受所有域名的跨域请求，也可以指定具体网址，也可以对域名进行限定：
Header set Access-Control-Allow-Origin http://www.test.com
然而，这种方式的局限性在于要求客户端支持，并且服务端进行相关设置。在这两者满足的条件下，进行CORS进行跨域不仅支持所有类型的HTTP请求，而且开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
（2）利用JSONP实现跨域
对于较老的浏览器，它们往往不支持CORS，因此使用JSONP进行跨域也是很常见的一种方式。
JSONP实现的原理如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

funciton getJSONP(url,callback){
	var funcName = getUniqueName(); //利用时间戳或者自增计数器获得唯一函数名
	url += "?callback" + funcName; //将函数名作为参数添加至url中
	var script = document.createElement('script') //动态构建script标签
	getJSONP[funcName] = function(response){
		try{
			callback(response) //处理响应数据
		}
		finally{
			//即使回调函数或响应抛出错误，清除动态增加内容
			delete getJSONP[funcName];
			script.parentNode.removeChild(script)
		}
	}
	//触发HTTP请求
	script.src = url;
	document.body.appendChild(script);
}

JSONP也存在一些弊端，首先JSONP支持GET不支持POST方法，另外使用script元素进行Ajax请求，这意味着允许web页面可以执行远程服务器发送过来的任何JavaScript代码，因此对于不信任的服务器，不应该采用该技术。
（3）利用window.name进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置，因此可以借助window.name在不同源的页面中传递数据
如www.a.com/a.html想要获得www.b.com/b.html中的数据，原理如下
1）在b.html中将数据存储在window.name中
2）在a.html中构建一个隐藏（display：none）的iframe标签，假设id设为proxy,src设置位h和a.html同源即可。
3）通过如下代码在a.html中获取到data

1
2
3
4

var proxy = document.getElementById('proxy');
proxy.onload = function(){
	var data = proxy.contentWindow.name; //获取到数据
}

4) 移除相关元素
（4）使用window.postMessage进行跨域
这种方式比较简单，在a页面中利用windowObj.postMessage(message,targetOrigin)向目标页面发送信息，而在b页面中通过监听message事件获取信息。这种方式是在HTML5中新增的方法，对于IE6，IE7等老版本浏览器无法使用。

原文:大专栏  跨域问题

跨域问题

标签：使用方法   出错   响应   发送   figure   div   ESS   highlight   xmlhttp   

原文地址：https://www.cnblogs.com/wangziqiang123/p/11631478.html