老被跨域问题烦？看看都有哪些处理方法

前面写的《IT技术人员的自我修养》，没想到几天内收到了不少良好的反馈，在此感谢大家的关注。往后会不定时分享一些技术、管理领域的工作经验总结与感悟，欢迎大家持续关注、交流。最近被问及一个跨域的问题，包括之前面试时发现很多面试者对跨域及其处理也是一知半解，故本文对该问题进行了梳理总结，以供参考。

1. 什么是跨域

理解什么是跨域，就要先了解一个叫“同源策略”的东西，什么是“同源策略”？这是浏览器为了网站访问安全，对来自不同源的请求做一些必要的访问限制的一种策略。那什么叫“同源”呢？我们知道，一个http请求地址一般包含四部分：协议://域名:端口/路径，所谓同源，就是前面三者，即协议、域名、端口都一样。举例说明，假如我们有一个地址 http://blog.jboost.cn/docker-1.html， 来看以下地址是否与它同源

地址	是否同源	说明
https://blog.jboost.cn/docker-1.html	不同源	协议不同，一个http，一个https
http://www.jboost.cn/docker-1.html	不同源	域名不同
http://blog.jboost.cn:8080/docker-1.html	不同源	端口不同，一个是默认端口80，一个是8080
http://blog.jboost.cn/docker-2.html	同源	虽然路径不同，但协议、域名、端口（默认80）都相同

 

那么浏览器对不同源的请求做了哪些访问限制呢？共有三种限制

1. 对Cookie、LocalStorage，以及IndexDB（浏览器提供的类NoSQL的一个本地数据库）的访问

2. 对DOM的访问

3. AJAX请求

而跨域就是要打破这种访问限制，对不同源的资源请求也能顺利进行，最常见的就是AJAX请求，比如前后端分离架构中，两者服务域名不同，前端通过AJAX直接访问服务端接口，就会存在跨域问题。

2. 为什么会存在跨域

前面说“同源策略”时已经提到，浏览器是为了网站的访问安全，才设置了跨域这道屏障。那么前面所说的三种限制，分别都是如何来保障网站安全的。

1. 对本地存储Cookie、LocalStorage、IndexDB的访问限制
   我们系统的登录凭证一般是通过在Cookie中设置 SESSIONID（如针对浏览器表单请求）或直接返回 token（如针对REST请求）的形式返回给客户端的，比如Tomcat是通过在Cookie中设置名为 JSESSIONID 的属性来保存的，而一般REST请求的token前端会存储于 LocalStorage 中，如果不存在访问限制，则你访问的其它网站可能就会获取到这些凭证，然后伪造你的身份来发起非法请求，这就太不安全了。

2. 对DOM的访问限制
   如果不对DOM进行访问限制，那么其它网站，尤其一些钓鱼网站，就可以通过