UI5前端Ajax请求Node.js后端触发同源问题的解决方案咨询

针对第一个疑问的答复 #

完全不需要把后端资源硬部署到localhost:8080/SixWonders路径下。
同一台机器的同一个端口同一时间只能被一个进程占用，你如果想让UI5前端静态服务和Node.js后端服务同时占8080端口是根本跑不起来的，这种强行把前后端塞到同端口的思路本身就走不通。

针对第二个疑问的答复 #

这类本地开发前后端端口分离导致的同源策略报错，有三个非常成熟的落地方案，按需选就行：

• 开发环境最省事：配置前端服务反向代理
  如果你是用UI5官方CLI的ui5 serve命令启动的8080前端服务，直接在项目根目录的ui5.yaml配置文件里加代理规则，把所有路径前缀匹配/SixWonders的请求，自动转发到http://localhost:3000/SixWonders。前端代码里的AJAX请求不要写死localhost:3000的全路径，直接写相对路径/SixWonders即可。
  这种方案下浏览器视角里所有请求都是发往8080端口的同源地址，根本不会触发跨域报错，前后端服务各自跑在自己的端口上，完全不存在冲突问题。
• 改造成本最低：后端配置CORS规则
  直接在Node.js后端配置跨域响应头，允许来自http://localhost:8080的请求即可。如果你的后端是基于Express搭建的，直接引入CORS中间件，把允许来源设置为前端本地服务地址，重启服务后，前端哪怕直接请求3000端口的全路径地址，也不会被浏览器同源策略拦截。注意生产环境不要把允许来源设为通配符*，要绑定实际的线上前端域名，避免出现安全风险。
• 生产环境通用方案：网关层统一反向代理
  线上部署时可以在最外层部署一层Nginx网关，对外只暴露一个服务端口：路径匹配到静态资源规则就转发给UI5前端静态资源目录，路径匹配到/SixWonders规则就转发给后端Node.js服务。用户访问时全程走同一个域、同一个端口，天然满足同源策略要求，也不会出现端口冲突的问题。

不推荐用JSONP之类的老方案解决跨域，只支持GET请求、安全风险高，现在已经基本淘汰了。

内容的提问来源于stack exchange，提问作者Coding12345