【SpringCloud】浏览器跨域问题原理及实现解决方案(CORS)
在项目开发中,不可避免得出现了跨域问题,故此总结一下解决方案
项目:spirngcloud微服务项目
域名:使用nginx反向代理
跨域:
以下情况都属于跨域:
跨域原因说明 | 示例 |
---|---|
域名不同 | www.jd.com 与 www.taobao.com |
域名相同,端口不同 | www.jd.com:8080 与 www.jd.com:8081 |
二级域名不同 | item.jd.com 与 miaosha.jd.com |
如果域名和端口都相同,但是请求路径不同,不属于跨域,如:
www.jd.com/item
www.jd.com/goods
注意:http和https也属于跨域
跨域问题:
跨域不一定都会有跨域问题,在跨域的基础上传送Ajax请求会出现跨域问题,导致无法加载被跨域名的接口数据
本质是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击
但是这却给我们的开发带来了不便,而且在实际生产环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?
解决方案:
- Jsonp(已淘汰):利用script标签可以跨域的原理实现
- nginx反向代理:利用nginx把跨域反向代理为不跨域,支持各种请求方式,但给运维人员带来不便
- CORS:规范化的跨域请求解决方案,安全可靠
Cors解决跨域问题
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)
它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10
-
浏览器端:
目前,所有浏览器都支持该功能(IE10以下不行)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与
-
服务端:
CORS通信与AJAX没有任何差别,因此你不需要改变以前的业务逻辑。只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否允许其跨域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可
以下是CORS的实现原理[选看]:
浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求
简单请求:
只要同时满足以下两大条件,就属于简单请求:
(1) 请求方法是以下三种