无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离

近年来，前后端别离已经成为中大型软件项目开发的最佳实践。

在技能层面，前后端别离指在同一个Web体系中，前端服务器和后端服务器采用不同的技能栈，运用标准的WebAPI完成协同作业。这种前后端别离的”混合开发”形式下，前后端一般会布置到不同的服务器上，即便布置在同一台机器，由于宿主程序（如后端用Tomcat，前端用nginx）不同，端口号也很难一致。

（图片来历网络）

这意味着坐落A域（如https://foo:80/website） 的页面，需求调用B域的WebAPI（如https://bar:8080/webservice），这是一个典型的跨域拜访，浏览器默许会判定该操作有安全风险。假如不进行处理，则会回绝这次WebAPI调用，提示对应的过错。

（跨域恳求导致的过错）

现在如何该怎么处理跨域的问题呢？现在有4个干流技能计划：

JSONP

假如你需求处理的恳求只要GET，能够考虑JSONP。

JSONP的原理便是运用<script>标签没有跨域约束的特点，经过<script>标签src特点，发送带有callback参数的GET恳求，服务端将接口回来数据拼凑到callback函数中，回来给浏览器，浏览器解析履行，从而前端拿到callback函数回来的数据。

（JSONP的调用流程）

这种做法很惯例，可是你需求为前端供给JSONP的响应，其他终端调用时供给不带JSONP的响应，因此会带来额定的开发和测试作业量。

iFrame

一般情况下，前后端别离带来的跨域拜访都限制在同一个主域的不同子域（如a.foo.com和b.foo.com）之间。所以，你能够运用iFrame加载坐落被调用WebAPI所在域的页面，然后将两个页面的document.domain设置为主域名（如foo.com），就经过iFrame中的子页面恳求WebAPI了。

（图片来历网络）

这种做法比较麻烦，咱们需求为WebAPI配套开建议中转效果的页面，但关于开发者而言依旧有很大的开发作业量。

CORS

和前两种计划比较，CORS（跨域资源共享）是一个”一劳永逸”的计划。

咱们不需求为每个WebAPI做额定的处理，而是需求在后端程序启动时，增加一些处理作业。干流的后端服务都有处理CORS的类库，这儿就不再做打开介绍了。

这个计划的中心原理，是在建议正式的恳求前，先发送一个OPTIONS谓词的HTTP恳求，问询建议恳求的页面是否有调用该域服务的权限；假如后端说OK，浏览器就继续恳求，否则提示过错。

运用这种计划的开发作业量小，假如直接运用成熟类库的话，开发和测试的作业量乃至能够忽略不计。不过，由于每个跨域的恳求都会触发一次往外的OPTIONS恳求，对服务器会形成额定的开支和压力。

反向署理

反向署理机制，把前端的A域和后端的B域合并成一个C域，从根本上处理跨域问题。

这个计划仅需装备，对前后端的程序没有侵入；同时内网中的反向署理一般也不会带来额定的功用开支。

（图片来历网络）

整体来说在编码开发的年代，上述四种计划都有适用的运用场景，各有优缺点。进入低代码开发年代后，前后端别离的运用面更广，如运用JavaScript编码开发前端、配合低代码构建的后端，或运用Java编码开发后端，供低代码构建的前端调用。

（低代码年代的前后端别离，来自 低代码沙龙）

低代码开发的中心价值在于节约开发投入，提升开发功率，所以，计划1（JSONP）和计划2（iFrame）已经很少被用到低代码混合开发领域。比较于计划3（CORS），计划4（反向署理）由于功用开支较小，运用场景会更多一些。

下面，咱们将以活字格+nginx为例，介绍运用nginx处理跨域问题，完成前后端别离的具体做法。

（反向署理的架构示意图）

运用nginx处理跨域问题

1. 开始装备之前，咱们运用活字格开发两个运用，仅包括前端页面的frontend和包括后端WebAPI（服务端指令）的backend，并将其别离发布到物理机或云主机上，运用的端口设置为8081和8080。咱们能够经过以下地址拜访这两个运用：

• 后端：http://host_name:8080/backend
• 前端：http://host_name_2:8081/frontend

1. 装置nginx，并在装备文件/conf/nginx.conf中HTTP节点装备前后端的服务器，即upstream节点：

upstream backend {
server host\_name:8080;
}
upstream frontend {
server host\_name\_2:8081;
}

1. 在HTTP节点下的server节点，装备监听端口和转发策略，这样就能够将http://host\_name:8080/backend映射为http://proxy\_name:8000/backend ，http://host\_name\_2:8081/frontend 映射为http://proxy_name:8000/frontend

listen 8000;
server\_name proxy\_name;
location /frontend {
proxy\_pass http://frontend/frontend ;
}
location /backend {
proxy\_pass http://backend/backend ;
}

1. 上述操作后，用户拜访的域名一致成了http://proxy_name:8000，跨域问题处理了。可是，不要着急。活字格默许会启用Http Referer验证机制，不允许跨域调用内置服务。所以，你还需求打开前端运用所在的服务端的办理控制台http://host_name_2:22345/UserService/ManagementPage/WebSecurity

在HTTP Referrer允许列表中添加nginx署理服务器的地址（也便是用户实际运用的地址，记住在后面加一个*号适配）。

1. 装备完成后，你能够就能够在前端页面中经过【发送HTTP恳求指令】，调用后端的WebAPI了。

（在前端调用后端WebAPI并弹窗显现回来成果）

特别提示：假如你需求将前端、后端和nginx布置在同一台机器上，能够将上述proxy_name、host_name、host_name_2一致替换为你的机器名或IP地址。

作为一款强大的反向署理和Web服务器，nginx的用处十分广泛，本文只是运用到了它的反向署理功用。除此之外关于负载均衡的处理nginx也有很优异的体现，在后续内容中咱们会为大家做愈加深入的介绍。

如需详细了解如何运用低代码开发前后端别离的企业级运用，快速转型全栈工程师，能够检查：

gcdn.grapecity.com.cn/forum.php?m…

除此之外假如你对更多低代码行业现状与发展趋势感兴趣能够检查：

help.grapecity.com.cn/pages/viewp…