背景:
目前公司有两个后台系统,后台a和后台b,登录会话是通过cookie建立的。现在需要在不经过大改造的情况下,做成看起来像是一个系统
解决思路:
将后台b的网页嵌入后台a中,后台b准备一个接口1(入参是用户名,输出是该用户名所属角色所拥有的菜单),后台a拿到菜单后将菜单它的左侧菜单中,在点击菜单之前,请求接口2(入参是用户名,实现的功能是为该用户种下cookie,这样就是登录了,response中会携带set-cookie,浏览器在收到后会将cookie种到接口2所属的域名下,这样当点击后台b的菜单时就可以直接打开了),接口2的请求方式要通过script标签包住,例如<script src="接口2的url"></script>,这种方式不是XHR的请求方式,所以也就避开了跨域安全问题
引申:
跨域:只要协议、路径、端口任意一个不一样就是跨域
发生跨域安全问题的三要素:
1.浏览器检查不允许跨域请求
2.本身请求属于跨域请求
3.请求方式是XHR
只有具备了上面的三个要素才会发生跨域安全问题,所以当发生跨域安全问题,三者只要解决一个问题也就解决了
解决“浏览器检查不允许跨域请求”:
这种方式是从客户端的浏览器着手,所以不实用
解决“请求方式是XHR”:
类似于jsonp方式,这种方式是将原本属于与XHR的请求方式更改为其它请求方式
解决“本身请求属于跨域请求”:
这个解决方式有两个方向:1.被调用方解决跨域 2.调用方解决跨域
被调用方解决跨域:使被调用方允许跨域(在代码层中的header中添加或者在nginx的服务器配置文件中添加)
调用方解决跨域:调用方使用代理,因为「跨域」的限制 仅仅在浏览器和服务器之间。我们不能强制远程服务器都允许「跨域」请求,所以我们能做的就是不要使用浏览器发送请求。所以在前端开发中,一种常见的规避跨域的方法就是:把 ajax 请求发送到你的本地开发服务器,然后本地开发服务器再把 ajax 请求转发到远端去,从网络拓扑上看本地开发服务器起着「反向代理」的作用。本地服务器和远端服务器是「服务器和服务器间的通信」,就不存在跨域问题了