一、同源
同协议
同域名
同端口(默认80)
二、ip和域名区别
ip指的是一个主机地址,而一个主机里面可以存放很多个网站,这些网站如果不同源,那么相互之间访问数据叫跨域
DNS把域名解析成ip地址(包含主机ip,主机根据域名找到相应的网站)
看《图解HTTP》
同源策略
三、自己本机模拟跨域(callback)
找到host文件
添加一个域名:
效果图:
上面把a.jrg.com(同源)改成b.jrg.com
数据存放的地址在b.jrg.com
另外一个不是同源网站(a.jjrg.com)获取到b.jrg.com的数据
特点:只能是get请求
四,cors(跨域资源共享)跨域请求(用在ajax请求中)
原理:
http://a.jrg.com:8080域名下发送一个请求到http://b.jrg.com:8080域名获取数据
http的请求头部会标明发送源的网址:
服务器会根据发送过来的源判断是否与要获取数据的域名在同一个域名下
若是同源下的域名,则,在响应体的头部添加一句Access-Control-Allow-Origin,并把数据一同返回到http://a.jrg.com
若不是同源下的域名,返回一个正常的http响应
下面报错不是同源:
然而,根据响应体头部这句Access-Control-Allow-Origin
我们可以在服务器手动设置允许不同源访问获取数据
完整代码
五,使用降域实现跨域
把一个iframe框架(里面引入一个网页)嵌入另一个不是同源的网页中
在当前网页中操作嵌入的网页(操作DOM,添加数据等)
在嵌入的网页中操作当前网页
效果图:
注:实线框为当前网页中的div ,虚线框为iframe嵌入当前网页的不同源的另一个网页
a.html(===http://a.jrg.com:8080/a.html)
b.html(===http://b.jrg.com:8080/b.html)
六,使用PostMessage实现跨域
效果图:
完整代码