使用反向代理解决跨域问题

lieeps 发布于2019-08-19 17:39 / 2342人阅读

摘要：之前拜读过之前拜读过发表的一片名为前后分离架构的探索之路的文章，也在提问中提到文章中不明白的内容，昨天有幸跟一位朋友聊起来如何使用反向代理解决跨域问题，经过他的指导我自己实践，终于测试成功了，把结果分享一下。

之前拜读过之前拜读过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里进行的，既没有跨域名，也没有跨端口。

使用反向代理的好处是，开发人员只需要关注自己的环境不需要关注与自己无关的内容，能够更加专注的开发和测试自己的代码，缺点是要熟悉反向代理的环境搭建可能稍微有点超出自己的责任范畴。

各种方法都有优缺点，根据自己的实际情况选择合适自己的模式才是王道。

注：本文在于抛砖引玉，内容里某些概念或者文辞可能使用不当，仅代表个人理解，如有不当之处还望指出批阅。

超融合服务器 idc机房托管阿里云跨域与反向服务器代理反向代理反向代理缓存 vps反向代理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78747.html

利用Nginx反向代理解决跨域问题

摘要：反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。使用反向代理可能访问网页相对于之前响应会比较慢标签： Nginx,跨域问题在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到...

EscapedDog 2019-08-23 14:13 评论0 收藏0
利用Nginx反向代理解决跨域问题

摘要：反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。使用反向代理可能访问网页相对于之前响应会比较慢标签： Nginx,跨域问题在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到...

YanceyOfficial 2019-07-25 14:36 评论0 收藏0
利用Nginx反向代理解决跨域问题

摘要：反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。使用反向代理可能访问网页相对于之前响应会比较慢问题在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到此类问题。 showImg(h...

Yu_Huang 2019-07-25 14:38 评论0 收藏0
通过nginx反向代理解决前端访问的跨域问题

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。一、问题背景说明：编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...

dongxiawu 2019-08-23 11:39 评论0 收藏0
通过nginx反向代理解决前端访问的跨域问题

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。一、问题背景说明：编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...

paulquei 2019-07-25 14:26 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0