⼀个后端是如何排查出前端技术问题的
后端开发是如何排查前端技术问题的
简单的⾃我介绍
刚毕业进了⼀家国资，都是全栈开发，那时还是 JavaScript，JQuery 的 DOM 操作，操作得⼀6⼀6的，后因为觉得太安逸然后跳了⼀家技术栈⽐较新的上市公司专⼼做后端开发，现在已经是后端开发的中流砥柱，主要负责项⽬的技术攻坚。已经考了软件设计师证，今年已报名考系统架构师证，⽬标是做⼀名资深的架构师。
⼀、技术背景
架构采⽤前后端分离的 B/S 架构。后端⽤ SpringCloud，前端⽤ qiankun + VUE + TS。下图是我要将要搭建的⽹络链路，通过 SLB 实现各开发环境切换的功能，SLB 固定代理 / 代理 NGINX，NGINX 通过 path 区分不同环境，再通过前后端⽹关进⾏请求分发到各⾃前端服务或后端服务，前端通过相对路径访问后端 API，也解决前端与前端和前端与后端的跨域问题。图中蓝⾊是前端⽹关，黄⾊是后端⽹关，最后是前后端独⽴服务。前端是多个单功能的服务，需要⽤ qiankun 将每个服务进⾏组装，主应⽤和每个微应⽤部署在不同的服务器，使⽤ Nginx 代理访问。不得已⽤ qiankun。
⼆、产⽣问题的现象
场景：主应⽤和微应⽤部署在不同的服务器，使⽤ Nginx 代理访问。使⽤ qiankun 时按照上⽂中图⽰对主应⽤和微应⽤进⾏ NGINX 代理，部署后。如下配置：
/dev/ {
proxy_pass www.a/;
proxy_set_header Host $host:$server_port;
}
/dev/app1/ {
proxy_pass www.b/;
proxy_set_header Host $host:$server_port;
}
访问主应⽤为：ip:port/dev/，访问微应⽤地址为：ip:port/dev/app1/
主应⽤配置：
registerMicroApps([
{
name: 'admin',
entry: '/app1/',
container: '#container',
activeRule: '/admin',
},
],
然后使⽤地址 ip:port/dev/ 能够正常访问但微应⽤⽆法访问，使⽤地址 ip:port/dev/app1/ 能够正常访问微服务。另外主应⽤在部署后⽆法加载资源，没有触发资源请求，没有报错，本地正常。
综上，我在将主应⽤和微应⽤分别部署在不同的服务器后，使⽤ Nginx 代理⽆法正常访问微服务，产⽣原因是主应⽤路由不正确（后⾯才知道的）。
三、痛苦边缘挣扎摸索
/ {
nginx部署前端项目
proxy_pass www.a/;
proxy_set_header Host $host:$server_port;
}
/app1/ {
proxy_pass www.b/;
proxy_set_header Host $host:$server_port;
}
主应⽤ entry 改为 /app1/ ，碰碰运⽓试⼀下，可以了，通过主应⽤能够访问到微应⽤了，这时在脑中浮现⼀个问题，难道是代理的问
题后⾯证明不是没办法了，再个前端同事试试，给她描述了⼀番现象后，她感觉是前端路由的问题，我也坚信，外⽹再仔细查查，果然查到了同事查到了
⽤qiankun引⽤发现是因为本地路径是localhost/#/myapp，然后服务器是 xxx/xxx/yyy/zzz/#/myapp, 然后路由中⼼的配置是/#/myapp，路由没有正确匹配引起的。
主应⽤增加了⼀个函数，帮助补充window.location.pathname前缀
快去⼩强改⼀下，试⼀下，最终通过改写 activeRule 函数，关键代理如下：
window.location.hash.startsWith("#container")
四、终得真理⼤道
真实的解决过程远⽐描述的要曲折，前前后后总共花了将近⼀天时间，但是我很享受这个解决过程，从不知道 qiankun，到慢慢了解，再求助他⼈，最后解决问题。通过这次帮助我们的⼩强解决主应⽤和微应⽤部署在不同的服务器，使⽤ Nginx 代理⽆法访问的问题发现，其是每个问题都不是问题，⽽是⼀次⼜⼀次的沟通过程，在沟通中分析问题，寻问题，最后解决问题。当你不知道的时候不妨问问⾝边的同事，但往往这种简单的事却很复杂，因为有些⼈迈不出这⼀步，特别是我们这个⾏业，不知道的问题太多，就需要多问多学，问在前，学在后，边问边学，边学边问。在这我劝那些不敢问，不想问的同⾏，要勇敢的迈出第⼀步，只有去问才能知道⾃⼰的不⾜，才能进步，⼤家⼀起进步。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。