跨域问题的由来
相信很多人都或多或少了解过跨域问题,尤其在现如今前后端分离大行其道的时候。
你在本地开发一个前端项目,这个项目是通过 node 运行的,端口是9528,而服务端是通过 spring boot 提供的,端口号是7001。
当你调用一个服务端接口时,很可能得到类似下面这样的一个错误:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gi6zOBkM-1589015502774)(https://upload-images.jianshu.io/upload_images/22478635-d3582f657736e22d?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
然后你在发送请求的地方debug,在出现异常的地方你将得到这样的结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4KuuqGm-1589015502777)(https://upload-images.jianshu.io/upload_images/22478635-f9818974784548f5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
异常对象很诡异,返回的 response 是 undefined 的,并且 message 消息中只有一个"Network Error"。
看到这里你应该要知道,你遇到跨域问题了。
但是你需要明确的一点是,这个请求已经发出去了,服务端也接收到并处理了,但是返回的响应结果不是浏览器想要的结果,所以浏览器将这个响应的结果给拦截了,这就是为什么你看到的response是undefined。
浏览器的同源策略
那浏览器为什么会将服务端返回的结果拦截掉呢?
这就需要我们了解浏览器基于安全方面的考虑,而引入的 同源策略(same-origin policy) 了。
早在1995年,Netscape 公司就在浏览器中引入了“同源策略”。
最初的 “同源策略”,主要是限制Cookie的访问,A网页设置的 Cookie,B网页无法访问,除非B网页和A网页是“同源”的。
那么怎么确定两个网页是不是“同源”呢,所谓“同源”就是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLht3hEz-1589015502779)(https://upload-images.jianshu.io/upload_images/22478635-437924641b5b8400?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
没有同源策略的保护
那么为什么要做这个同源的限制呢?因为如果没有同源策略的保护,浏览器将没有任何安全可言。
老李是一个钓鱼爱好者,经常在 我要买(51mai.com) 的网站上买各种钓鱼的工具,并且通过 银行(yinhang.com) 以账号密码的方式直接支付。
这天老李又在 51mai.com 上买了一根鱼竿,输入银行账号密码支付成功后,在支付成功页看到一个叫 钓鱼(diaoyu.com) 的网站投放的一个"免费领取鱼饵"的广告。
老李什么都没想就点击了这个广告,跳转到了钓鱼的网站,殊不知这真是一个 “钓鱼” 网站,老李银行账户里面钱全部被转走了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0cxAqtsL-1589015502782)(https://upload-images.jianshu.io/upload_images/22478635-8a469821129180b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
以上就是老李的钱被盗走的过程:
1.老李购买鱼竿,并登录了银行的网站输入账号密码进行了支付ÿ