Karma-Jasmin-Webpack 单元测试

Photo by Gabor Koszegi on Unsplash

为了确保 fast-recorder 能够在实际浏览器环境下如预期的执行,在单元测试阶段,就要在浏览器环境下进行测试。Karma 测试框架帮我很好地解决了这个问题。

Karma 本身可以提供浏览器环境,并在其中利用单元测试框架(jasmin)等来做单元测试。同时强大的是,它有一个 preprocessor(预处理器)模块,可以在浏览器加载脚本时,根据你的需要对程序进行预处理。

继续阅读Karma-Jasmin-Webpack 单元测试

IOS 视频播放黑屏问题解析

IOS 下浏览器播放本网站的视频会出现黑屏。假如在浏览器中直接访问视频文件的地址也出现黑屏,那么你就需要检查一下(通过 POSTMAN 等 HTTP 工具)后端有没有对 Range 请求头做出响应。

产生原因

IOS 下浏览器(Chrome,Safari)在请求视频流时,会默认在 HTTP 请求头中加入 Range 来向服务器请求对应的视频片段。参考这个在线视频链接,IOS 浏览器可以完美播放。使用 Fiddler 在 IOS 下抓包可以看到,在请求这个资源时(单单针对这个视频),手机发出了二次请求。

继续阅读IOS 视频播放黑屏问题解析

Fiddler IOS 抓包保姆级教程

Fiddler 端配置

选择 Tools —— Options——HTTPS,勾选如下配置。

选择 Tools —— Options——Connections,勾选如下配置。注意这里的 8888 为监听端口。

操作系统配置

确认操作系统关闭防火墙,或者开放 8888 端口。

网络配置

确保电脑和手机在一个网络中。在电脑端查看本机 IP 并记录。这里为 192.168.31.55

继续阅读Fiddler IOS 抓包保姆级教程

NGINX 反向代理百度 API

NGINX 反向代理到本机服务做过不少,但很少思考参数的意义。技术债的隐患往往会在特定时候爆发。为了解决如题的问题,我直接把配置改改拿来使用,却发现行不通。

问题

问题在于对于请求头 Host 属性的设置问题。Host 表示的是请求服务器的地址。在转发的时候,可以通过 proxy_set _header 来设置目的地址。

对于转发到本机服务,可以使用 $http_host 来指定本机作为目的地址。但是对于若想转发到非本机服务,Host 需要设置为目的服务所在的主机 IP 或者域名。

在如题所描述的场景中,我需要把请求转发到 vop.baidu.com 这个域名下的 server_api 接口。该接口属于非服务器本机服务,故需要替换 $http_host 为域名 vop.baidu.com。(场景描述 localhost/server_api => vop.baidu.com/server_api)

继续阅读NGINX 反向代理百度 API