一、跨域相关概念
- 在跨域之前首先要知道什么是同源。当域名、协议、端口全部相同,这时候就是同源。
- 同源策略是浏览器核心基础安全策略。同源策略是用来防御来自非法的攻击,但是我们不能因为防御非法的攻击就将所有的跨域都拦截。
- 同源策略示例:
- http://www.a.com/a.js 与 http://www.a.com/b.js 同一域名下 允许
- http://www.a.com/lab/a.js 与 http://www.a.com/script/b.js 同一域名下不同文件夹 允许
- http://www.a.com:8000/a.js 与 http://www.a.com/b.js 同一域名,不同端口 不允许
- http://www.a.com/a.js 与 https://www.a.com/b.js 同一域名,不同协议 不允许
- http://www.a.com/a.js 与 http://70.32.92.74/b.js 域名和域名对应ip 不允许
- http://www.a.com/a.js 与 http://script.a.com/b.js 主域相同,子域不同 不允许
- http://www.a.com/a.js 与 http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
- http://www.cnblogs.com/a.js 与 http://www.a.com/b.js 不同域名 不允许
- 所谓跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一致,即不同源时,就会产生跨域。
二、跨域解决方案
-
修改浏览器的安全设置(极度不推荐,不安全)
-
iframe(不推荐)
-
JSONP;
- 其原理就是Ajax存在跨域安全问题,但是script 标签引用 是不存在这类问题的。
-
跨域资源共享CORS(Cross-Origin Resource Sharing)
- CORS是一个新的W3C标准,它新增的一组HTTP首部字段允许服务器声明那些来源有权限访问哪些资源。换言之就是说它允许浏览器向其声明了CORS的站进行跨域请求。
- HTTP首部增加主要就是:Access-Control-Allow-Origin
- 使用CORS比JSONP有优势。JSONP只支持GET方式,局限性很多。采用CORS的方式,前端编码与正常非跨域请求没有什么不同。
-
反向代理
- 通过在请求到达服务前部署一个服务,将接口请求进行转发,这就是反向代理。通过一定的转发规则可以将前端的请求转发到其他的服务。
- 通过反向代理我们将前端后端项目统一通过反向代理来提供对外的服务,这样在前端看上去就跟不存在跨域一样
- 反向代理麻烦之处就是在对Nginx等反向代理服务的配置,在目前的前后端分离项目中很多就是采用这种方式。