最近在做公司業務時，需要在線瀏覽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.
好了， 跨域問題完美解決。