nginx+postman,一种mock后端接口的异常场景测试方案

简介: ### 背景说明 有时在调测前端,或者想要测试验证前端对于后端异常的兼容性时,如果直接让后端模拟异常返回可能比较麻烦,此时,一种mock后端返回的方案将有助于快速调测。 网上也有不少相关的方案,比如通过Charles断点也可以修改后端接口的响应报文,但是如果前端设置了超时时长,那么有可能还没来得及修改响应报文,前端就已经因超时而失败了。当然,网上也有一些其他的类似Chrome插件的方式,我

背景说明

有时在调测前端,或者想要测试验证前端对于后端异常的兼容性时,如果直接让后端模拟异常返回可能比较麻烦,此时,一种mock后端返回的方案将有助于快速调测。

网上也有不少相关的方案,比如通过Charles断点也可以修改后端接口的响应报文,但是如果前端设置了超时时长,那么有可能还没来得及修改响应报文,前端就已经因超时而失败了。当然,网上也有一些其他的类似Chrome插件的方式,我目前还没有试用过,如果其他同学有好的分享,也欢迎留言。

本次记录的Nginx+postman的方案,虽然配置有些复杂,但是一旦配置完成,使用起来还是非常方便的。该方案的示意图如下。

image.png
接下来详细介绍配置过程。

postman mock服务端接口

postman mock服务端接口的方式比较多,也可以参考前面的文章:
postman mock接口返回,这里只简要记录常见的一种,操作过程如下所示:
mock-creation-app-cnx.gif

  • 第一步:在postman主控制面板点击New按钮,然后选择“Mock Server”
  • 第二步:设置mock接口的方法、访问路径、返回码和响应报文,然后点击Next
  • 第三步:设置Mock Server名称,[可选]设置环境,然后点击“Create Mock Server”
  • 第四步:点击“Copy Mock URL”复制出mock url(这是访问mock接口url前缀,也可以在collections详情中查看)
  • 第五步:然后就可以拼接mock url和第二步设置的访问路径来发送请求检查mock结果了

设置了mock server之后,可能最常用的操作就是修改mock接口的返回报文,可以这样操作:

  • 第一步:在mock server下选择想要修改返回报文的request
  • 第二步:选择Examples中的default(或者新建一个Example也行)
  • 第三步:修改Example中的响应报文并Save Example

之后再访问mock接口,看到的就是新的响应报文了
image.png

image.png

本地安装和配置Nginx

安装Nginx

安装Nginx比较简单,这里只记录Mac下的安装:

brew install nginx

生成自签证书

如果后端接口是http请求,那么这一步可以省略;
如果是https请求,那么就需要生成和配置证书

  • 第一步:进入Nginx目录,并新建一个目录存放证书相关信息
cd /usr/local/etc/nginx
mkdir ssl
cd ssl
  • 第二步:创建服务器私钥
openssl genrsa -out server.key 1024
  • 第三步:生成证书申请
openssl req -new -key server.key -out server.csr

cp server.key server.key.org
openssl rsa -in server.key.org -out server.key
  • 第四步:生成签署文件
openssl x509 -req -in server.csr -out server.crt -signkey server.key -days 3650

配置Nginx

进入Nginx config目录,配置nginx.conf

cd /usr/local/etc/nginx
vim nginx.conf
  • http接口可以在server下面这样配置:
        listen       8080;
        server_name  www.xx.com; # 后端服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {               # 要转发的请求的路径
            root   html;
            index  index.html index.htm;
            proxy_pass http://315049fd-d7a2-4fff-ab56-48f4c73bbab0.mock.pstmn.io/test-mock;        # postman mock接口连接
        }
  • https接口可以在server下面这样配置:
        listen       443 ssl;
        server_name  www.xx.com; # 后端服务的域名

        ssl_certificate      /usr/local/etc/nginx/ssl/server.crt;
        ssl_certificate_key  /usr/local/etc/nginx/ssl/server.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location /yyy {
            root   html;
            index  index.html index.htm;
            proxy_pass http://315049fd-d7a2-4fff-ab56-48f4c73bbab0.mock.pstmn.io/test-mock;        # postman mock接口连
        }

配置之后保存

启动Nginx

进入Nginx bin目录,启动Nginx。(Mac上安装之后可以直接在命令行输入nginx启动)

nginx

本地配置host

编辑hosts文件,新增一行配置,从而将本地到服务端接口的请求转发到nginx上,然后再由nginx转发请求到postman mock server。

vim /etc/hosts

新增一行并保存

# www.xx.com为服务端域名
127.0.0.1 www.xx.com

调试访问

在postman中调测

在postman中新建一个request,然后输入后端接口地址,模拟请求发送。此时可能会遇到下面的报错:“Error: self signed certificate”。

这时,可以在postman主控制面板,点击Postman > Preference打开postman设置界面,将General tab下面的“SSL certificate verification”设置为“OFF”

然后重新发送请求,检查是否为postman mock server的返回。
image.png

在浏览器中调测

浏览器直接访问前端时,可能会遇到上面一样的问题。后端接口报“net: ERR_CERT_INVALID”。

这时,可以直接在前端页面上输入“thisisunsafe”
image.png

或者浏览器新打开一个tab,访问服务端接口地址,然后会展示如下提示“您的连接不是私密连接”,然后同样的在该页面输入“thisisunsafe”
image.png
该问题的其他解决办法可以参考这位同学的总结:
https://segmentfault.com/a/1190000021843971

相关文章
|
19天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
100 1
|
2月前
|
JSON Java 数据格式
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
本文介绍了使用Postman调试接口时遇到的“Content type ‘multipart/form-data;charset=UTF-8’ not supported”错误,原因是Spring Boot接口默认只接受通过`@RequestBody`注解的请求体,而不支持`multipart/form-data`格式的表单提交。解决方案是在Postman中将请求体格式改为`raw`并选择`JSON`格式提交数据。
使用postMan调试接口出现 Content type ‘multipart/form-data;charset=UTF-8‘ not supported“
|
19天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
114 0
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
293 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
40 0
|
3月前
|
Java 程序员 编译器
作为后端开发,感受下接口带来的魅力!🔥🔥
在一场大厂面试中,小南被问及何时选用接口,何时采用抽象类。一位拥有24K粉丝的博主给出解答:选择取决于需求——接口定义多个类需遵守的契约,而抽象类则用于创建共享实现的基类。有时两者结合使用,通过抽象类实现接口以确保契约并提供通用功能。此外,小南还分享了关于抽象类的深入探讨,包括子类如何正确调用父类构造函数、访问父类成员以及父类不可访问的方法等细节。最后,他提出一个关于接口与抽象类差异的小测验,并邀请读者关注他的开源项目《Java学习进阶指南》,旨在帮助Java开发者更好地掌握核心知识和面试要点。
182 3
作为后端开发,感受下接口带来的魅力!🔥🔥
|
3月前
|
负载均衡 应用服务中间件 网络安全
Django后端架构开发:Nginx服务优化实践
Django后端架构开发:Nginx服务优化实践
58 2
|
3月前
|
XML Web App开发 数据挖掘
Postman接口测试工具全解析:功能、脚本编写及优缺点探讨
文章详细分析了Postman接口测试工具的功能、脚本编写、使用场景以及优缺点,强调了其在接口自动化测试中的强大能力,同时指出了其在性能分析方面的不足,并建议根据项目需求和个人偏好选择合适的接口测试工具。
116 1
|
3月前
|
Web App开发 JSON 测试技术
精通Postman接口测试:关联技术与自动化实践指南
这篇文章详细介绍了如何使用Postman进行接口测试,包括关联技术、自动化实践,以及如何通过环境变量和全局变量解决接口之间的关联性问题。
104 0
精通Postman接口测试:关联技术与自动化实践指南