pdf.js跨域问题的分析

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

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

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

但官方给出了两个方案。

1. 使用cors。
2. 将业务服务器作为代理，可查看此issue

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

1. 增加后端压力
2. 占用业务服务器存储

我想到的第二个方案， 存储服务器增加跨域的头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.

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