跨域问题是怎样造成的？

跨域问题的由来

相信很多人都或多或少了解过跨域问题，尤其在现如今前后端分离大行其道的时候。

你在本地开发一个前端项目，这个项目是通过 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.老李购买鱼竿，并登录了银行的网站输入账号密码进行了支付ÿ