什么事跨域？

　　概念：只要协议、域名、端口又热和一个不同，都被当做跨域。

URL	说明	是否允许通信
http://www.cnblogs.com/a.js
http://www.cnblogs.com/b.js	同一域名	允许
http://www.cnblogs.com/lab1/b.js
http://www.cnblogs.com/lab2/b.js	同一域名下，不同文件夹	允许
http://www.cnblogs.com:8000/a.js
http://www.cnblogs.com/b.js	同一域名，不同端口	不允许
http://www.cnblogs.com/a.js
https://www.cnblogs.com/b.js	同一域名，不同协议	不允许
http://www.cnblogs.com/a.js
http://42.121.252.58/b.js	域名和域名对应的ip	不允许
http://www.cnblogs.com/a.js
http://gudoumaoning.cnblogs.com/b.js	主域名相同，子域名不用	不允许
http://www.cnblogs.com/a.js
http://cnblogs.com/b.js	同一域名，不同二级域名	不允许
http://www.cnblogs.com/a.js
http://www.gudoumaoning.com/b.js	不同域名	不允许

对于端口和协议的不同，只能通过后台来解决

方法一：跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing) 跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定

请求或相应是应该成功还是失败。

以上的test是相对路径，如果要使用CORS，相关的ajax代码如下：

两端代码相比的区别在于相对路径换成了其他域的绝对路径，也就是要跨域访问的接口地址。

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许ajax进行跨域的访问

JSONP：维基百科的定义是：JSONP(JSON with Padding )是资料格式JSON的一种“使用模式”，可以让网页从别的网域要资料。

JSONP也叫做填充式JSON，也就是JSON的一种新方法，只不过是被包含在函数调用中的JSON

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

在JS中，直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，JSONP正是利用这一特性来实现的。例如

js文件载入成功后会执行我们在url参数中指定的函数，并且会把需要的json数据作为参数传入。所以JSONP是需要服务器端的页面进行相应的配合的。

最终输出的结果为：doSomething(['a', 'b', 'c']);

如果使用jquery，那么通过他封装的方法就能很方便的来进行JSONP操作了。

jquery会自动生成一个全局函数来替换callback=? 中的问号，之后获取数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax

方法；跨域的话则会异步加载js文件的形式来调用jsonp的回调函数。

JSONP的优缺点：

　　优点：它不像XMLHttpRequest对象实现的ajax请求那样受到同源策略的限制；他的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以

通过调用callback的方式回传结果。

　　缺点：之支持GET请求而不支持POST等其他类型的请求；只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行Javascript调用的问题。

CORS和JSONP对比

　　JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

　　使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

　　JSONP主要被老的浏览器支持，他们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

浏览器都有一个同源策略，其限制之一就是不能通过ajax的方法去请求不同源中的文档，他的第二个限制是浏览器中不同域的框架之间是不能进行js的交互的操作。

不同框架之间是可以获取window对象的，但无法获取相应的属性和方法。

比如，有一个页面，他的地址是"http://www.cnblogs.com/a.html"，在这个页面里面有一个iframe，他的src是"http://cnblogs.com/b.html",很显然，这个页面与他里面的iframe框架是不同域的，所以我们是

无法同过在页面中书写js代码来获取iframe中的东西的：

这个时候，document.domain就可以派上用场了，只要把"http://www.cnblogs.com/a.html"和"http://cnblogs.com/b.html"这两个页面的document.domain都设成相同的域名就可以了。

但要注意的是，document.domain的设置是有限制的，只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面http://www.cnblogs.com/a.html中设置document.domain:

2.在页面http://cnblogs.com/b.html中也设置document.domain:

修改document.domain的方法只适用于不同子域的框架间的交互。

window对象有个name属性，该属性有个特征：即在一个窗口（window）的声明周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name

是持久存在一个窗口载入过的所有页面中的

window.postMessage(message, targetOrigin)方法是html5新引进的特性，可以使用他来向其他的window对象发送消息，无论这个window对象是属于同源或不同源

目前IE8+,FireFox,Chrome,Opera等浏览器都已经支持window.postMessage方法

转载于:https://www.cnblogs.com/guDouMaoNing/p/4383962.html

你可能感兴趣的文章