跨域
1.原因
因为浏览器的同源限制策略。 浏览器规定只有 端口,协议 ,域名都一致才属于同源,可以互相访问。
浏览器如果没有限制同源访问,一些钓鱼网站可以读取你的cookie信息,伪造身份向其他浏览器发送请求,也就是我们常说的csrf攻击。
2.解决跨域的方法
- 最经典的方法Jsonp
原理:通过动态插入script标签 通过src路径去访问跨域的地址 参数上带上要执行的回调函数 然后通过解析响应得到想要的信息。
缺点:只能发送get请求
- 最流行方法 CORS(CORS是一个W3C标准,全称是"跨域资源共享"),可以参考阮一峰老师的文章
原理:它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制。
分类:简单请求--浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin
字段。Origin
字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
非简单请求--那种对服务器有特殊要求的请求,比如请求方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求,否则就报错。
- 最简单的方法 Nginx(反向代理)
原理:前端请求以本地路径路径进行访问 发送请求到Nginx服务器上 再以真实的域名广播到请求服务器上 这一层代理之后就不存在跨域问题了
- 嫡系方法 postMessage
- 其他方法
webscoket
window.name
document.domin--这种方式只适合主域名相同,但子域名不同的iframe跨域。比如主域名是http://crosdomain.com:9099,子域名是http://child.crosdomain.com:9099,这种情况下给两个页面指定一下document.domain即document.domain = crosdomain.com就可以访问各自的window对象了。