之前拜读过之前拜读过nightire发表的一片名为“前后分离架构的探索之路”的文章,也在提问中提到文章中不明白的内容,昨天有幸跟一位朋友聊起来如何使用反向代理解决跨域问题,经过他的指导我自己实践,终于测试成功了,把结果分享一下。
问题场景:
后端开发API接口,部署在开发服务器上,前端开发静态页面部署在前端开发服务器上
前端JS中需要通过AJAX异步请求API的数据,由于两者分布在两台服务器中,所以这个请求存在了跨域
解决方法:
方法一:
前端开发完成以后,将前端工程文件通过某些方法直接拷贝到后端服务器上,使两者处于同一台服务器,解决跨域。
问题:
这样做导致前端不能时时调试自己的逻辑,还要依赖于后端的环境
方法二:
前端在自己的服务器上模拟后端API的数据
问题:
这样做前端不仅要写自己的内容,还要额外编写后端的测试数据,增加工作量而且不能直接知晓API的各种实际返回结果。
书归正传,下面说说如何使用反向代理解决跨域问题
我用的是nginx,可以使用其他相同功能的软件替换,比如我在本地开启nginx监听80端口,本地服务器跑8080端口,远程API服务器在10.10.10.10上
通过在nginx的配置文件,在location里把常规路径直接指向本地8080,把API请求路径指向远程服务器地址
本地访问localhost/常规地址,通过nginx的反向代理,请求会转到localhost:8080这台服务器上,代码里请求数据地址为/api则会把请求转到远程PAI服务器上,而整个过程,我们其实都是在localhost里进行的,既没有跨域名,也没有跨端口。
使用反向代理的好处是,开发人员只需要关注自己的环境不需要关注与自己无关的内容,能够更加专注的开发和测试自己的代码,缺点是要熟悉反向代理的环境搭建可能稍微有点超出自己的责任范畴。
各种方法都有优缺点,根据自己的实际情况选择合适自己的模式才是王道。
注:本文在于抛砖引玉,内容里某些概念或者文辞可能使用不当,仅代表个人理解,如有不当之处还望指出批阅。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。