跨域，同源策略，实现跨域请求数据

一、同源

同协议
同域名
同端口（默认80）

二、ip和域名区别

QQ图片20170319141614.png

ip指的是一个主机地址，而一个主机里面可以存放很多个网站，这些网站如果不同源，那么相互之间访问数据叫跨域
DNS把域名解析成ip地址（包含主机ip，主机根据域名找到相应的网站）
看《图解HTTP》

同源策略

三、自己本机模拟跨域(callback)

找到host文件

图片.png

添加一个域名：

图片.png

效果图：

本机模拟跨域效果.gif

图片.png

上面把a.jrg.com(同源)改成b.jrg.com
数据存放的地址在b.jrg.com

图片.png

另外一个不是同源网站（a.jjrg.com）获取到b.jrg.com的数据

图片.png

图片.png

图片.png

完整代码

图片.png

特点：只能是get请求

四，cors（跨域资源共享）跨域请求（用在ajax请求中）

原理：
http://a.jrg.com:8080域名下发送一个请求到http://b.jrg.com:8080域名获取数据
http的请求头部会标明发送源的网址：

图片.png

图片.png

然而，根据响应体头部这句Access-Control-Allow-Origin
我们可以在服务器手动设置允许不同源访问获取数据

图片.png

图片.png

五，使用降域实现跨域

把一个iframe框架（里面引入一个网页）嵌入另一个不是同源的网页中
在当前网页中操作嵌入的网页（操作DOM,添加数据等）
在嵌入的网页中操作当前网页
效果图：
注：实线框为当前网页中的div ，虚线框为iframe嵌入当前网页的不同源的另一个网页

降域.gif

a.html(===http://a.jrg.com:8080/a.html)

图片.png

图片.png

完整代码

六，使用PostMessage实现跨域

效果图：

PostMessage实现跨域.gif

图片.png

图片.png

图片.png