关于前后端联调,后端问题需要依赖于复杂页面交互,是怎么接入前端来调试后端问题的呢

[liudewa]

1. 我是前端开发,现在对接不同的部门的后端开发,而且我们是有开发服务器的,我这边调试都是接入开发服务器的地址(只要后端是最新的)不用依赖后端同事

2. 部门 A 后端开发,每次后端出现问题,都要我启动前端本地项目来接入他本地进行调试问题(耦合性也太大了,我本来在做其它项目,突然要我启动前端,每次去厕所在拉屎,会让我启动前端服务)

3. 部门 B 后端,从开发开时就从没连过他们本地服务,他们有变动会更新后端服务就很舒服(有个疑问,对于后端需要前端页面复杂交互来调试接口是怎么来调试的呢)

采用了 57 楼的方法 解决了我的问题
感谢这种方法可以 我前端使用 nginx 启动个服务,代理配置后端接口,当后端让我启服务时甩给他地址就可以了
其它的 像浏览器半个插件,后端自己用 nginx 启动前端服务(不经常更新,要是启动,每次还要打前端包给他),
总之还是要做到 前端甩他一个链接(其余多的不能)

[javalaw2010]

给他惯的，最多告诉他调用了哪些接口，顺序是什么，自己造数据测去

[liudewa]

@javalaw2010 #1 部门 B 有时会让 提供接口需要的参数

[sarices]

让他用 postman 测试啊，最不济也可以用 curl 测试啊，

[chenyu8674]

发错版了喂

[scyuns]

前端就是人肉网关 外加背锅的

[JYii]

正常正规都是 B ，跨部门、跨公司开发联调。A 一般是部门内部快速看问题，通常也是熟人打招呼连他本地，因为他 debug 方便。综上，看你跟他关系了

[MRG0]

后端都是看着原型图加 postman 出接口的，连前端太费劲了

[exmario]

正常都是后端自己用 postman ，再不行后端自己写模拟请求工具

[lihai1911]

让他自己启动前端项目去，什么奇葩联调，要参数啥的，自己看接口文档 swageer 啥的，按流程搞好接口文档啥的，哪这么多逼事

[supuwoerc]

让后端写单测 + postman 自己测试过了再发到测试环境。

[supuwoerc]

@liudewa 你反问他：“找前端要接口参数是不是认为后端没存在的必要了？”

[SethShi]

首先去连接他的服务器本地调试这种事就不对啊 (让他自己解决)

[SethShi]

1. 复杂参数第一次, 这种你完全可以把测试环境的 CURL 参数发给他, 他自己导入到 postman 自己调试 (然后写到 API 文档默认参数, 下次继续使用)
2. 依赖顺序行为的 (比如, 需要点击 A, 行为 B, 触发 C) 要么写单测, 要么恶心人

[tonytonychopper]

让后端自己写单测吧

[liudewa]

@JYii #6 A 是一块进公司的

[zqusky]

给他代码，让他自己在本地跑，我测试都是拉前端最新的代码，自己在本地测，大家都方便

[zhengfan2016]

这种问题很简单啊，你们找你们前端牢大，建立一个测试前端环境

假设原来:
---
本地环境前端: 127.0.0.1
生产环境前端：8.8.8.8
---
你们只需要搭建一个测试环境前端：
----
本地环境前端: 127.0.0.1
测试环境前端: 192.168.50.66 api 指向测试环境后端 api
生产环境前端：8.8.8.8
---

然后这个测试环境每次你们前端 commit 都会触发 build ，或者每小时，每次打 tag 都触发 build ，这样以后后端找问题，让他自己去测试环境自己测试就行了，不妨碍你带薪拉屎

[lisianthus]

你把前端打包一下，然后用 node.js 起一个静态服务器和 http 请求代理转发到后端，把页面地址给后端，让他自己调。这样就不会影响本地正在开发的项目，而且可以同时对接多个后端

[tf2]

你前端也搭个测试环境呗。

[sir283]

op 都说了，后端 a 是跟 op 一起入职的，说明这两人都是新来的，都不熟悉流程跟接口参数，需要前端手动走一遍流程，看看是走的那些参数跟接口。评论区里这一群人，一上来就说是后端的问题，也是没谁了，敢情就你一个人厉害了，那公司还要招那么多人干嘛，全给你一个人干不就行了。😅

[linshuizhaoying]

找运维要个资源 发测试版

[HaibaraDP]

请求头里加参数，网关根据参数决定转发到哪个服务上

[liudewa]

@zhengfan2016 #17 服务器 不能访问个人电脑 只能个人电脑访问服务器

[beidounanxizi]

害得我登录回复 哥们你不会抓包请求 甩给他 curl 请求嘛 何必将就 A
curl 就是前后端联调的沟通窗口啊 返回数据有问题 就让后端改
什么本地起服务 联调
调侃下 估计你们公司开的薪资都很低 😂

[beidounanxizi]

network fetch/xhr copy --> copy as curl

[liudewa]

@beidounanxizi #24 纯牛马 工资是低

[liudewa]

@beidounanxizi #24 他需要自己复现 比如是一个表单提交接口报错了,而提交需要的参数是其它页面接口返回的

[vansiit]

@beidounanxizi #25 这不就是正解吗，这么简单的事

[james2013]

哪个接口报错了，把接口名称和参数发给后端，后端自己直接调用接口调试。
基本上能解决 90%的问题

[spritecn]

话说,你们没有稳定的前端开发环境?

[chairuosen]

把相关所有接口的 curl 给他就行，他自己去试

[liudewa]

@spritecn #30 没有只有开发环境, 这个有什么特别的吗

[spritecn]

@liudewa 就是 19 楼说的意思,稳定的前端测试环境

[Cruzz]

发个 curl 不就行了么。

[beidounanxizi]

@liudewa 你还没理解我的意思 厘清责任
curl 甩给他 剩下不需要你做什么事，跟环境没任何关系 ，
你只需要证明返回的数据 在我的 ui 交互和数据展示上没问题就行了， 除非你自己 web 端有问题
你可以配合他联调 但是主动权在你这里 当然你这个后台开发应该是 99% javaer 开发的
至于开发测试生产环境 你喊没有资源 需要运维支持下（当然运维一般不要太菜）

[liudewa]

@beidounanxizi #35 好的 感谢大佬

[liudewa]

@spritecn #33 服务器是不能访问个人电脑的,除非后端打包放到服务器才行,现在后端就想在本地调试,环境没什么用(当然前端也可以打包,让它自己本地启个前端服务)

[syseven]

代理下接口能有多难...

[MoYi123]

专门部署一个用来测试啊, 比如游戏的后端要测试, 要写代码模拟的工作量是等于是要把前端重写一遍了.

[starlion]

1 、可以根据你的前端项目出一个 API 文档（不管是你自动生成 OpenAPI 还是手写的），接口名称，接口参数，数据格式等等，测试代码示例 - postman 或者 curl 示例 一步一步咋测写清楚 。作为公共文档丢给它
2 、本地搭建一个前端的测试项目

[Torpedo]

一般都是反过来的。因为后端是比较好构造逻辑调试的。反而前端是不容易构造一些数据和环境的。
这点从单测上就能看出来

[v21984]

后端对着 postman 自动脑补画面，这是基本功

[kytrun]

我是使用浏览器扩展 https://github.com/g0ngjie/ajax-proxy 重定向前端的接口到本地服务器（服务需要配置一下 cors ），所有在原本的前端页面发起的请求都过来了

[demonzoo]

自己发 api 测啊，postman 是干啥使的？

[lozzow]

话说回来,好多前端连 copy as curl 都不知道

[birdegg]

我是后端，如果线上的开发环境不理想，对于特别复杂的页面，涉及好多个接口好几个后端服务的，我都是自己本地启动前端调试

[qinqiuxu]

我同事都是在她电脑本地启动前端项目，自己调用页面调试的

[wangritian]

A 就是有问题，哪怕是刚接触项目要从界面熟悉接口，也应该找楼主问前端编译好的项目和启动方式，而不是强奸楼主的时间

[xuanbg]

简单，让运维在开发环境也正常部署前端代码不就完了。

[liudewa]

@wangritian #48 三年起步

[liudewa]

@lozzow #45 之前都是 打开浏览器请求 址 和 参数 一个一个复制的

[liudewa]

@xuanbg #49 没有运维 服务器密码给你 前端后端分开部署自己的

[CodeCodeStudy]

A 比较水，一般是用 postman 之类的 http 客户端工具测试接口有没有问题

[spritecn]

我特别想知道,没有相对稳定的开发测试环境的话,你们测试都是怎么工作的

[liudewa]

@spritecn #54 有开发环境,但开发环境前后端都是打包部署后的,现在问题是后面想连本地调试

[kaf]

想本地调试喊他自己运行啊，装个 node 又不麻烦

[vvtf]

看样子 op 和我司的环境比较像, 测试开发环境在公网, 不能连接本地, 本地能访问测试开发环境.
而且后端还是微服务, 网关, 授权, 注册中心等都在公网(由于公网不能访问本地所以注册上去也没用).
这种问题其实很简单, 这是我的解决办法:
后端只需要本地启动一个 nginx 就行了,
除了需要 debug 的微服务代理到本地, 其他所有的全部走测试,开发环境;
比如测试环境在 test.com, 现在后端觉得有一个微服务 svc-x 有问题, 需要联调,
可以这样配置:
```
server {
listen 7004;
server_name localhost;

# 这里主要是看网关路由的配置是什么, 一般现在前端和后端的路由是有区别的
# /svc-x 的服务全部走到本地, 并且去掉/svc-x path
location /svc-x/ {
proxy_redirect off;
proxy_pass http://localhost:8080/;
proxy_connect_timeout 15s;
proxy_send_timeout 15s;
proxy_read_timeout 15s;
proxy_set_header X-Forwarded-Proto http;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

location / {
proxy_pass http://test.com;
proxy_connect_timeout 15s;
proxy_send_timeout 15s;
proxy_read_timeout 15s;
proxy_set_header X-Forwarded-Proto http;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```

这样随时使用开发测试环境的前端以及后端鉴权等.

[alleluya]

@lozzow #45 你以为后端知道? 我发一个 curl 还在里面一个一个扒入参呢

[Tdy95]

之前 leader 推广过前端微服务，我写了个 Chrome 扩展插件，用于测试线上环境的，本质上就是通过 Chrome 的插件来修改请求调用的网关地址。

同样的，可以让后端浏览器装个插件，把请求转发到他本地服务，就不需要依赖前端了

[lucasdev]

以前用的这个 Chrome 插件，https://github.com/yize/xswitch ，一把抓住前端请求，顷刻炼... 转发到本地后端。

不过这个插件现在不维护了，使用油猴脚本、或者 whistle 之类的代理工具也能轻松实现。或者让 ai 给你写个 Chrome 插件来转发。

[lozzow]

@alleluya 哈哈哈,确实这种很常见

[rsyjjsn]

你本地代理到 foo.com ，然后 hosts 把 foo.com 映射到 测试服务器 IP 或者域名，然后后端 a 需要连接自己的本地，就改 hosts foo.com 映射自己的 localhost 就行

[wuxianliang]

后端只负责单测 Test 功能验证 Mock + JMeter 接口性能验证，对接前端发个 API 文档不就行了

[liudewa]

@vvtf #57 感谢这种方法可以 我前端使用 nginx 启动个服务,代理配置后端接口,当后端让我启服务时甩给他地址就可以了
其它的 像浏览器半个插件,后端自己用 nginx 代理什么的都要他操作,我怕他麻烦

[cjwcjwcjwcjw]

让前端请求转发到本地服务就好了，或者让后端拉前端代码，本地自己联调，全栈（狗头）