跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

这个措施出发点是好的，但在项目开发的过程中，常常给前端开发者带来麻烦。 由于页面开发中，静态资源是放在本地电脑上的，访问这些资源通常通过IP方式（127.0.0.1）或者localhosts来访问，与线上服务器所在域名不符，不能顺利进行接口调用。

解决跨域问题常用的解决方案有两个：

  • JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。
  • CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。

但是这两个跨域方案都存在一个致命的缺陷，严重依赖后端的协助。

开发中遇到的每一个接口都需要提前找后端进行特殊处理。而且即使后端愿意帮忙，某些接口也不是随便能开放的（譬如已经在线上正式环境的接口）。 所以依赖后端协助的跨域解决方式都会在一定程度上限制前端的开发进度。

那么有没有前端独立就能解决的跨域方案呢？有的，我们可以利用「代理」或「反向代理」技术来解决开发中的跨域问题。

 

代理与反向代理

代理

代理，也称正向代理，是指一个位于客户端和目标服务器(target server)之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标(目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。