跨域
一、同源策略
同源策略是浏览器为了安全性考虑采取的一些措施。
同源：同端口、同域名、同协议。
注意:Cookie中的同源只关注域名，忽略协议和端口
同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性,即从一个域上加载的脚本不允许访问另外一个域的文档属性。
在浏览器中，<script<、<img<、<iframe<、<link<等标签都可以加载跨域资源，而不受同源限制(即认为这些资源与当前文档是属于同源的,因此在当前文档中可以调用/访问脚本中的数据和函数).但浏览器限制了JavaScript的权限使其不能读、写加载的内容。？？？？？？？？？？？
另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。
二、如何解决跨域
所有浏览器都实施同源策略,为了规避跨域,有一些方法可以尝试:
jsonp、跨域资源共享CORS、代理或使用插件如Flash等.
1、jsonp
在浏览器中，<script<、<img<、<iframe<、<link<等标签都可以加载跨域资源，而不受同源限制。
基于这个原理,可以用script标签加载跨域资源,跨域资源给页面提供数据即可
2、服务器端(跨域资源共享CORS)
如果能让服务器端在HTTP的响应头中加入白名单(可以访问的域名和HTTP请求方式),则可以解决此问题。
如何加入白名单:
例子如下,设置此页面在白名单中,限制其请求方式、请求类型等
Access-Control-Allow-Origin: example.com Access-Control-Request-Method: GET, POST Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin Access-Control-Expose-Headers: Content-Range Access-Control-Max-Age: 3600
设置白名单之后,客户端的行为如下：
a)发送options请求,请求Access-Control信息,如果自己的域名在允许访问的列表里,则发送真正的请求(get或者post),否则放弃请求发送
b)直接发送请求,然后检查response的Access-Control信息,如果自己的域名在允许访问的列表里,则读取response body,否则放弃.本质上服务端的response内容以及到达本地,JavaScript决定是否要进行读取.
3、代理方式
同源限制是浏览器做的,即请求如果不是从浏览器发起的则不受同源策略限制,也即不属于跨域。所以由服务端代理发起请求,因为服务端的请求不是从浏览器发起的,就规避了浏览器的跨域限制.
4、使用插件
使用Flash进行跨域.
Flash也存在跨域限制,只是因为Flash的跨域配置比较简单(只需要在站点根目录下放置crossdomain.xml即可),所以虽然要安装插件,还是大部分选择这种方式.
crossdomain.xml使用方法:
以酷6上传视频为例:
调用上传组件时,会请求crossdomain.xml,如下图:
返回白名单列表
参考文章:
1、同源策略、跨越请求和JSONP
2、 同源策略和跨域访问
3、在Ajax中使用Flash实现跨域数据读取的实现方法