什么是浏览器跨域访问操作,js如何实现?

转载自:https://blog.csdn.net/wangchengiii/article/details/78081032

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。
　　跨域问题是由于javascript语言安全限制中的同源策略造成的。
　　简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是域名、协议和端口号的组合只要协议、域名、端口有任何一个不同，都被当作是不同的域。

特别注意两点：

1、如果是协议和端口造成的跨域问题“前台”是无能为力的；
2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
URL的首部：指window.location.protocol +window.location.host，也可以理解为“Domains(域名), protocols(协议) and ports(端口) must match”。

方法一、通过jsonp跨域
JSONP包含两部分：回调函数和数据。
回调函数：当响应到来时要放在当前页面被调用的函数。
数据：就是传入回调函数中的json数据，也就是回调函数的参数了。
jsonp虽然很简单，但是有如下缺点：
1）安全问题(请求代码中可能存在安全隐患)
2）要确定jsonp请求是否失败并不容易

方法二、通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)

浏览器同源策略限制：
不能通过ajax的方法去请求不同源中的文档。浏览器中不同域的框架之间是不能进行js的交互操作的。

所以，在不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外)，总之，你可以当做是只能获取到一个几乎无用的window对象。
　　例如，在一个页面 http:// www.example.com/a.html 中，有一个iframe框架它的src是http:// example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

方法三、使用window.name+iframe来进行跨域

window的name属性特征：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB），即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面window.name都有读写的权限。

正是由于window的name属性的特征，所以可以使用window.name来进行跨域。

方法四、使用window.postMessage方法来跨域(不常用)

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源(可实现跨域)，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
　　message：为要发送的消息，类型只能为字符串；
　　targetOrigin：用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 “*”。

方法五、使用跨域资源共享（CORS）来跨域

CORS：一种跨域访问的机制，可以让AJAX实现跨域访问；CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。
　　服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求．
　　就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

方法六、使用location.hash+iframe来跨域（不常用）
　　假设域名test.com下的文件a.html要和csdnblogs.com域名下的b.html传递信息。
　　1) 创建test.com下的a.html页面， 同时在a.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一旦有变化则获取获取hash值

方法七、使用Web sockets来跨域

web sockets： 是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

方法八、使用flash URLLoader来跨域
　　flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问，SWF也可以通过API来确定自身能被哪些域的SWF加载。
　　例如：当跨域访问资源时，例如从域baidu.com请求域google.com上的数据，我们可以借助flash来发送HTTP请求。

跨域实现方式：
　1.首先，修改域google.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把baidu.com加入到白名单。
　2. 其次，通过Flash URLLoader发送HTTP请求
　3. 最后，通过Flash API把响应结果传递给JavaScript。

Flash URLLoader是一种很普遍的跨域解决方案，不过需要支持iOS的话，这个方案就不可行了。