最近在做公司业务时，需要在线浏览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.
好了， 跨域问题完美解决。