AJAX四种跨域处理方法
同源策略
同源策略
同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名、同一主机名、同一端口号下的数据。因此,请求不同协议名、不同主机名、不同端口号下的文件,违背同源策略,无法请求成果,需要进行跨域处理。
同源策略限制的具体行为:
(1)Cookie、LocalStorage、IndexDB无法读取;
(2)DOM无法获得;
(3)AJAX请求不能发送。
什么是跨域?
两个页面之间的请求,协议、域名、端口都必须相同,才算在同一个域,否则就是跨域。
直接通过FORM表单提交的post/get请求不受同源策略限制,因此需要设置csrf_token防范CSRF攻击。
跨域处理方法
CORS——服务端放开跨域限制(即XHR2)
CORS,Cross-Origin Resource Sharing,跨域资源共享
CORS定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。CORS是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。 CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。只需服务器发送一个响应header即可。
由于有同源策略,跨域请求默认是禁止的。
CORS通过设置HTTP Header Access-Control-Allow-Origin实现:
Access-Control-Allow-Origin:* //允许所有域名的脚本访问该资源
Access-Control-Allow-Origin:http://a.b.com //允许特定域名访问该资源
Access-Control-Allow-Methods:GET, PUT, DELETE, POST //允许的跨域请求
Access-Control-Allow-Headers:content-type //允许跨域请求保护header
Access-Control-Max-Age:xxx //跨域有效期内不需要重新发送预校验(OPTIONS)请求
CORS流程:JS先发出跨域请求,再检查响应中的“Access-Control-Allow-Origin”头。如果这个头允许当前页面跨域访问,则可以读取响应,否则被禁止访问。如果不是简单的CORS,则先发送OPTIONS进行预校验,允许访问再发送跨域请求。
代理
方法一:通过后端(ASP、ASP.NET、JAVA、PHP)获取其他域名下内容,再将结果返回前端。
方法二:NGINX反向代理转发
NGINX代理,转换为同域名。CORS的致命缺点:AJAX不会把cookie中的session id也发送过去。
方法三:NGINX方向代理,通过NGINX进行CORS控制。
JSONP
jsonp只支持get请求,不支持post。
原理:动态引入script标签,而script标签的src是可以跨域的。
iframe
通过修改document.domain来跨域:只能把document.main设置成自身或者更高一级的父域,且主域必须相同。——实现不同字域的框架间的交互。
可以用隐藏的iframe做代理,让iframe载入一个与AJAX目标页面处在相同域的页面,因此,该iframe可以正常使用AJAX获取数据,再通过修改document.domain,让主页面的js可以完全控制iframe。