跨域的几种方式:
cors方式
cross-orign-resource-shareing(跨域)
参考:http://www.ruanyifeng.com/blog/2016/04/cors.html
分为简单请求和非简单请求。
非简单请求会发送preflight(预请求)
cors跨域方式是浏览器自己带的。
主要控制方式是在服务器端,同时需要浏览器的部分配合。
浏览器端主要的方法:
Access-Control-Request-Origin(Origin)
Access-Control-Request-Method
Access-Control-Request-Headers
带凭据的请求
withCreditials:
服务器主要的方法:
Access-Control-Allow-Origin:
Access-Control-Allow-Methods:
Access-Control-Alllow-Headers:
Access-Control-Max-Age:
带凭据的请求
Access-Control-Allow-Creditials:
JSONP
参考:https://segmentfault.com/a/1190000015597029
后台服务相当于中转站,在前端的一个script标签里创建另一个script标签,并指定新的script标签的src,把方法和参数都从url中传给后台。
后台得到url中的参数(包括方法和方法参数),返回到前端,作为新的script的内容执行带参函数。
缺陷:
1.只能用get方法;
2.不安全:从其它域中引用代码,一定要保证安全,一旦出现安全问题,几乎要放弃使用;
3.不能判断jsonp是否请求失败。script标签的onerror事件浏览器支持性不是很好。
iframe跨域
1. 空iframe+form表单 v
2. iframe + document.domain v
3. iframe + window.name v
4. iframe + location.hash
5. iframe + postMessage v
nginx
知识补充
和跨域相关的一个设计模式是代理模式
概念:由于一个对象不能直接访问另一个变量,所以要通过一个中间变量去访问另一个变量。
JSONP代理模式:被代理者是要请求的html,请求的url返回数据的那个域属于代理域,代理域和被代理域在同一个域名下,代理域指的是动态的script标签。请求的url是另一个域。
xxx + iframe 跨域: 被代理者是要请求的html,请求的url返回的那个域属于代理域,代理域和被代理域在同一个域名下,代理域指的是iframe。请求的url是另一个域。(window.name,iframe + form表单,window.postMessage,document.domain,location.hash)