image
ZERO
持续更新 请关注：https://zorkelvll.cn/blogs/zorkelvll/articles/2018/12/17/1545037152528
背景
本文主要是记录在实际工作过程中，涉及到的一个问题对于各类外部资源如公告、研报等各类PDF文件，需要在H5页面（混合在ios和android中的）内嵌预览这些文件，由于涉及到很多外部源且匹配规则几乎都不一样，因此通过代理匹配规则或者构造一个代理资源池，将是一个十分麻烦几乎不可能去实际操作的一件事情，对于这样的一个问题，采用如下的解决方案：
1、Nginx配置一个url且以参数形式读取到前端需要访问的PDF文件所在的公网地址，并在此处直接进行反向代理其请求过来的参数值（这个参数值是一个http地址，如
http://www.cninfo.com.cn/finalpage/2018-11-29/1205638902.PDF
并添加跨域头请求设置（包括以后出现的其他外部静态资源跨域请求问题，均可以通过该方式去实现），配置如下：
resolver 8.8.8.8; #指定DNS服务器地址
location /pdf{
if ($query_string ~* "key=(.+)$") { #匹配url中的参数key=xxx
add_header 'Access-Control-Allow-Origin' '*';
set $key $1; #将$1(xxx)赋值给变量$key
proxy_pass $key; #代理地址
}
}
那么，浏览器中示例访问nginx主机接口地址：
http://127.0.0.1:8080/pdf?key=http://www.cninfo.com.cn/finalpage/2018-11-29/1205638902.PDF
可以访问该pdf文件（且经过测试该方式解决了跨域问题）
2、H5在app内部通过vue-pdf加载显示（iframe不用解决跨域问题，但是ios上会出现只显示一屏问题，所定义的大小都失效，样式失真问题），代码如下：
pdf.createLoadingTask( 'http://127.0.0.1:8080/pdf?key=' + this.lnkAddr);