xiaomibaobao

前后端联调接口反向代理

用Nginx / Webpack-devServer实现简单的前后端接口反向代理

前后端联调中,如果是新组织的部门,前端同学文件发送给后端同学,后端同学放到他们的文件结构下,然后打开页面进行调试,如果发现问题,不管是样式、逻辑或者数据交互,都需要前端修改后,重新打包然后发送给后端,后端再放到他们的文件结构下,调试的效率极低,特别浪费时间。

1.可选的解决的方案:

  • 首选肯定是基于Nodejs来做接口的调整与转发完成完整的前后端分离了,但是校园生活这边只有我一个人,时间上不现实。
  • Nginx实现一个简单的代理服务器,当浏览器向Niginx发送请求的时候,我们让Nginx根据情况进行分发,如果是静态资源从我们的本地读取,如果是前后端数据接口的话,就走后端同学的Tomcat服务器。
  • Webpack基于NodeJS,可以做一下简单的接口反向代理。

2.Nginx安装和配置。

核心就是安装Nginx,并修改一下设置,将静态资源或数据接口按需分发。如下图:
image

  1. 首先建议在Mac中安装brew,以后装什么都方便。在命令行中复制如下代码即可:
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. 执行 brew search nginx brew install nginx
  3. 启动nginx ,sudo nginx;访问localhost:8080 发现已出现nginx的欢迎页面了。
  4. 配置nginx,在Mac的根目录下,cd usr/local/etc/nginxvim nginx.conf ,进入编辑nginx.conf,在server的配置中加入以下代码(删掉注释)。保存退出后不要忘了重启Nginx,nginx -s reload,然后就可以愉快的联调了。Nginx Server详细配置
1
2
3
4
5
6
7
8
9
10
//文件后缀可以根据实际需要添加,基本都是静态文件
location ~ .*\.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
//你本地的node服务(即webpack的daServer)IP
proxy_pass http://192.168.2.72:8888;
}
// admin/api/改成前后端接口中统一的api前缀
location ~ /admin/api/ {
////后端童鞋的服务器IP
proxy_pass http://192.168.2.147:8080;
}
  • tips:使用vim编辑有些童鞋应该很不习惯,要先点击i键,进入insert模式,然后粘贴、编辑一下代码,保存的时候先按esc,然后输入:wq即可。如果你是第一次安装Niginx,以前也没有接触过,把上面代码粘贴到大约45行处即可,大神请忽略。

4.我们做到了什么,遇见了什么问题。

  1. 开发效率更高,在联调之前,互不干扰,前端开发完成后就是实际可用的代码,不需要再转换成后台编译环境,永远不会被java / php 启动不成功所困扰。最终调试完,我们只需要给后端打包发送一次就OK。

  2. 部分需要前后端共同开发的功能,如文件上传,通常需要页面端与接收端都进行相关的开发配置,之前较难定位是谁配置错误,现在全部由前端完成,开发、测试都容易定位,上传成功后,只要向java发送文件保存的路径即可。

  3. 完全分清了前后端开发人员的职责,任一方开发完成后都可以提测,实现同步开发、测试

  4. 联调非常简单,若双方接口一致,正常情况下只要修改要接口请求IP即可完成切换。

  5. 问题责任清晰,联调、测试、预发、上线,每个过程都难免会产生问题,前端、后端、运维三方责任边界清晰,日志中记录nodejs的请求发出,nginx请求接收与转发、java端请求接收与返回,三处任何一处断点,都能马上定位是哪方的问题。

  6. 问题 Nginx 在加载资源的时候报错ERR_CONTENT_LENGTH_MISMATCH,原因:proxy_buffering off;在上面代码的IP后面加入即可。

4.Webpack-devServer的反向代理

原理基本等同于Nginx的方案,只需要配置一下proxy属性即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 配置服务器
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
contentBase: "./app",
port: 8888,
proxy: { // 联调中跨域问题解决,接口语法和Nginx基本一致。
'/activity/*': {
changeOrigin: true,
target: 'http://192.168.4.156:8080',
secure: false,
},
'/topnews/user/ifLogin': {
changeOrigin: true,
target: 'http://192.168.4.156:8080',
secure: false,
},
}
},

5.福利

偶然发现了伟烈的博客,注意,有诗作和美照哦!

如果我实实在在的帮到您,可以点击打赏,请我喝一杯。