作为开发,BUG对于我们来说可谓是鱼儿离不开水,开发水平再高深有的时候也难免会犯一些很搞笑的错误,俗话说的好,
如果一件事情你不能拒绝,就学会享受它! 今天让我们来讲讲 "跨域" 这个问题, 为什么要讲跨域呢,是因为我发现跨域具体
是什么,为什么会产生跨域这个问题,并不是每个开发都清楚,为了避免我们闹出一些傻大哈的搞笑问题! 我们今天就一起来认
识一下,什么叫跨域,跨域应该如何避免?

何为跨域?
其实跨域问题是因为浏览器的同源策略导致的,同源策略是由Netscape提出的一个著名的安全策略,现在所有支持JavaS
cript的浏览器都会使用这个策略(基本上),所谓同源就是指域名、协议、端口相同。当我们通过浏览器打开一个百度页面,
当前浏览器的百度页面会自动加载一些资源脚本,当在执行脚本的时候会检查当前脚本是否属于本页面的,即检查是否同源,
只有和百度同源的脚本才会执行,非同源的话会在控制台上报错.
- 例:
http://www.demo.com/user.html 调用 http://www.demo.com/detail/get (非跨域)
http://www.demo.com/user.html 调用 http://www.test.com/detail/get (跨域,主域名不同)
http://www.demo.com/user.html 调用 http://ftp.demo.com/detail/get (跨域,子域名不同)
此外localhost和127.0.0.1虽然都指向本机,但是也属于跨域,端口和协议不同(http/https)也属于跨域 !!!
为什么会有同源策略
同源策略好麻烦啊,还会导致跨域问题,为什么要支持同源策略啊! 接下来我们从DOM同源策略和XMLHttpRequest同源策
略来举例说明,如果浏览器没有同源策略会产生什么样的问题呢?
如果没有DOM同源策略,也就是说不同域的iframe之间可以互相访问,那么黑客可以这样攻击:
1、做一个假网站,里面用iframe嵌套一个银行网站
2、把 iframe 宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别
3、这时如果用户输入账号密码,我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点,就可以拿到用户
的账户密码了,如果没有XMLHttpRequest 同源策略,那么黑客可以进行 CSRF(跨站请求伪造) 攻击:
1、用户登录了自己的银行页面,向用户的 cookie 中添加用户标识
2、用户浏览了虚假的恶意页面,执行了页面中的AJAX 请求代码
3、此时发起AJAX Http请求,请求将对应cookie同时发送过去
4、银行页面从发送的 cookie 中提取用户标识,验证用户无误,response 中返回请求数据。此时数据就泄露了
以上的所有行为因为都是通过AJAX在后台执行的,用户甚至都没办法感知这个过程,因此同源策略是为了保障用户的
信息安全,防止恶意的网站窃取用户的数据,达到不可告人的目的。
如何避免跨域?
1、可以通过后台接口封装,然后前台调用解决
2、Js跨域如果不操作到Cookie的操作 设置 response.setHeader("Access-Control-Allow-Origin","域名");
3、后台需要所有的域都可以对此方法进行跨域,设置response.setHeader("Access-Control-Allow-Origin"," * ")
4、如果需要操作cookie,则添加response.setHeader("Access-Control-Allow-Credentials","true"),因为不这样,
cookie将无法通过跨域的方式过去,并且操作cookie不支持通配符* ,设置表头信息,必须单个单个设置域名,并且在js中传递凭证