跨域问题

Posted 2023-01-02 wangziqiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域问题相关的知识，希望对你有一定的参考价值。

当我们在页面中通过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实现的原理如下：

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

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等老版本浏览器无法使用。

原文:大专栏跨域问题

以上是关于跨域问题的主要内容，如果未能解决你的问题，请参考以下文章