Nginx 配置代理解决外链 PDF 文件 H5(ios+android) 内置预览跨域问题

    本文主要是记录在实际工作过程中，涉及到的一个问题对于各类外部资源如公告、研报等各类 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);