分类 标签 存档 社区 博客 友链 GitHub 订阅 搜索

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

405 浏览





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-291205638902.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-291205638902.PDF

可以访问该 pdf 文件(且经过测试该方式解决了跨域问题)

2、H5 在 app 内部通过 vue-pdf 加载显示(iframe 不用解决跨域问题,但是 ios 上会出现只显示一屏问题,所定义的大小都失效,样式失真问题),代码如下:

pdf.createLoadingTask( 'http://127.0.0.1:8080/pdf?key=' + this.lnkAddr);





评论  
留下你的脚步
推荐阅读