跨域问题的原因及解决对策

内容来自两篇非常好的文章

https://zhuanlan.zhihu.com/p/145837536

https://zhuanlan.zhihu.com/p/66484450

跨域问题的由来

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

你在本地开发一个前端项目，这个项目是通过 node 运行的，端口是9528，而服务端是通过 spring boot 提供的，端口号是7001。

当你调用一个服务端接口时，很可能得到类似下面这样的一个错误：

然后你在发送请求的地方debug，在出现异常的地方你将得到这样的结果：

异常对象很诡异，返回的 response 是 undefined 的，并且 message 消息中只有一个"Network Error"。

看到这里你应该要知道，你遇到跨域问题了。

但是你需要明确的一点是，这个请求已经发出去了，服务端也接收到并处理了，但是返回的响应结果不是浏览器想要的结果，所以浏览器将这个响应的结果给拦截了，这就是为什么你看到的response是undefined。

浏览器的同源策略

那浏览器为什么会将服务端返回的结果拦截掉呢？

这就需要我们了解浏览器基于安全方面的考虑，而引入的 同源策略(same-origin policy) 了。

早在1995年，Netscape 公司就在浏览器中引入了“同源策略”。

最初的 “同源策略”，主要是限制Cookie的访问，A网页设置的 Cookie，B网页无法访问，除非B网页和A网页是“同源”的。

那么怎么确定两个网页是不是“同源”呢，所谓“同源”就是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

浏览器如何判断一个请求是不是跨域请求？

浏览器会根据同源策略来判断一个请求是不是跨域请求。

非跨域请求，在请求头中会只包含请求的主机名。

跨域请求，在请求头中会既包含要请求的主机名还包括当前的源主机名，如果这两者不一致，那就是跨域请求了。

没有同源策略的保护

那么为什么要做这个同源的限制呢？因为如果没有同源策略的保护，浏览器将没有任何安全可言。

老李是一个钓鱼爱好者，经常在 我要买(http://51mai.com) 的网站上买各种钓鱼的工具，并且通过 银行(http://yinhang.com) 以账号密码的方式直接支付。

这天老李又在