pdf.js跨域问题的分析

最近在做公司业务时，需要在线浏览pdf。在现代浏览器中，均可直接浏览pdf文件，无兼容性问题。但公司的业务线需要支持到ie8。

经过自己的搜索调研， pdf.js比较适合。pdf.js兼容到ie9, 我和领导讨论后决定ie9及以上浏览器可在线预览， ie9以下直接下载，不提供预览。

开始把pdf.js的demo搭好，感觉很好用啊。因为我们的存储是在七牛云，动态存储域名与业务域名不一致，就会遭遇跨域问题。查看pdf.js的faq发现， pdf.js默认不支持跨域。

但官方给出了两个方案。

使用cors。

将业务服务器作为代理，可查看此issue

我个人想到的最简单的方案是我后端拿到pdf后，存在本地服务器，这样就不会有烦人的跨域问题了，之前也写过类似的代码，但不是本文重点，就不贴代码了。此方案有两个问题

增加后端压力

占用业务服务器存储

我想到的第二个方案，存储服务器增加跨域的头Access-Control-Allow-Origin，允许业务服务器直接读取，但在ie9上会出现安全提示，好烦恼啊。

本文的重点来了，这里主要用到了nginx的proxy_pass, 主要用法可以查看官方文档proxy_pass, 最简单就是从一个服务器代理到另一个服务器。

location /name/ {

    proxy_pass http://127.0.0.1/remote/;

}

而我的存储域名为动态的，我先定义好我的url，如/Index/viewer?file=http://hd4.xwg.cc/2017-04-10_1491805971_FlNoJrXvyicG7SRDg4Y6E3tA8-7G.pdf?bucket=qxt-2017,对应的存储域名由bucket来决定为qxt-2017.cdn.xwg.cc。下面是我的nginx配置

location ~ .*\.pdf

    {

          resolver 100.100.2.138;

          proxy_pass http://$arg_bucket.cdn.xwg.cc;

    }

我最开始并未加上resolver指令， nginx一直报错，而静态的存储域名没事，查看官方文档可知

Parameter value can contain variables. In this case, if an address is specified as a domain name, the name is searched among the described server groups, and, if not found, is determined using a resolver.

好了，跨域问题完美解决。

巴特西

pdf.js跨域问题的分析

最新文章

热门文章