基于安全方面考虑，浏览器对于与当前页面不同域的数据交互会进行阻止，不同源的客户脚本在没有明确授权的情况下不能读取对方资源，这一规则称为同源策略。
同源策略使得常规跨域数据交互被阻止，而有时用户又不得不进行外域数据请求，因此，跨域就是用于解决不同域之间的数据正常交互的技术方案。主要跨域手段包括以下三种：
1、JSONP方法
JSONP（JSON with Padding），这种方法的主要思想是通过script请求任意域数据，将请求到的数据作为当前域下的JS代码进行执行，通过一些列转换，就可将异域的数据获取并在当前页面进行操作。具体步骤以下面为例进行说明：
①创建一个能实现静态解析和动态路由的服务器和html页面文件
②node server.js创建本地服务器之后在localhost：8080端口下打开html，点击show news触发click事件去跨域请求http://127.0.0.1:8080/getnews?callback=appendHtml下的数据，服务器对当前含/getnews的script请求进行相应，返回了
appendHtml(["第11日前瞻：中国冲击4金 博尔特再战200米羽球","正直播柴飚/洪炜出战 男双力争会师决赛","女排将死磕巴西！郎平安排男陪练模仿对方核心"]) 格式的数据，在当前页面下被作为JS调用提前写好的函数进行执行，最后展示到页面上。如下图
2、cors方法
CORS（corss-oringin resource sharing），是一种ajax跨域请求资源的方式，由于浏览器同源策略机制，当使用XMLHttpRequest发送请求时，如果该请求不符合同源策略，浏览器会给该请求加上一个请求头：origin，此时如果不做任何处理，浏览器将拒绝接受此请求返回的数据，将无法实现跨域数据交互。CORS方法的思想就是在返回结果中加入一个响应头：Access-Control-Allow-Origin，此时浏览器就会接受之前带有Origin相应头对应数据，实现异域数据传输。下面结合而具体演示说明：
①先创建一个具有静态和路由选择功能的服务器，本地打开html文件页面：
当跨域向http://127.0.0.1发送跨域数据请求时，浏览器会给该请求加上响应头Origin，导致请求数据被浏览器拒绝。
同源策略使得跨域请求时响应头中被加上origin
当在代码中加入Access-Control-Allow-Origin后，浏览器会允许localhost去请求http://127.0.0.1域下的数据，这就是CORS方法。
方法3：降域
当a.jrg.com 想要操作 b.jrg.com的文件，可以通过两者都添加document.domain = "jrg.com"降域为jrg.com才能互相操作
缺点：只能用于相同的父级域名
降域
跨域是实现异域之间数据交互的必要手段，不同情形下选择合适的方法进行跨域操作，是各个域之间数据交互的基础。
网友评论