最近在做公司业务时,需要在线浏览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.

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

pdf.js跨域问题的分析的更多相关文章

  1. pdf.js跨域加载文件

    pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选 本地预览 在pdf.j ...

  2. 使用 pdf.js 跨域问题的处理方法1

    在<使用 pdf.js 在网页中加载 pdf 文件>中详细介绍了 pdf.js 的使用与集成网页开发的基本方法.展示效果如下图: 站点的目录为 http://localhost:8033/ ...

  3. JS跨域方法及原理

        JS跨域分析判断 JS跨域:在不同域之间,JS进行数据传输或通信.比如ajax向不同的域请求数据.JS获取iframe中的页面中的值(iframe内外不同域) 只要协议.端口.域名有一个不同则 ...

  4. 什么是JS跨域请求

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 5种处理js跨域问题方法汇总(转载)

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  6. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  8. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

随机推荐

  1. 使用Lucene.net+盘古分词实现搜索查询

    这里我的的Demo的逻辑是这样的:首先我基本的数据是储存在Sql数据库中,然后我把我的必需的数据推送到MongoDB中,这样再去利用Lucene.net+盘古创建索引:其中为什么要这样把数据推送到Mo ...

  2. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  3. Codeforces_776B: Sherlock and his girlfriend(素数筛)

    题目链接 题意:对2~n+1染色,一个数不能与其素因子同色. 故而只需两种颜色即可,素数染1,合数染2便可满足条件 #include<bits/stdc++.h> using namesp ...

  4. [C++]智能指针的实现与使用

    智能指针 智能指针是当我们在使用对象时,有时会把对象的内存分配在堆上忘记释放,导致内存泄露,并且当多个指针共享同一个对象的内存时,容易出现重复释放内存,导致错误. 我们针对所需要共享的对象,手动完成一 ...

  5. Mac系统下STF的环境搭建和运行

    本文参考以下文章整理:MAC 下 STF 的环境搭建和运行 一. 前言 STF,全称是Smartphone Test Farm,WEB 端批量移动设备管理控制工具,就是可以用浏览器来批量控制你的移动设 ...

  6. 运行shell脚本时报错"[[ : not found"解决方法

    问题描述 在运行shell脚本时报错,命令为: sh test.sh 报错如图: 脚本代码如下: #!/bin/bash # file:test.sh # author:13 # date:2017- ...

  7. 用Node.JS+MongoDB搭建个人博客(安装环境)(一)

    Node.JS是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Nod ...

  8. sybase数据库和oracle数据库中字段中含有换行符的解决办法

    最近在做数据库从sybase到oracle的迁移工作,sybase数据库表bcp导出后,通过sqlldr导入到oracle数据库,然后oracle数据库通过spool按照sybase数据库bcp的格式 ...

  9. 移动端APP页面Webview模式跳转详解

    首先,来看一下关于Android home键和back键区别 back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Dest ...

  10. AVR开发 Arduino方法(一) 端口子系统

    Arduino UNO R3使用的主处理器ATMega328P上有3个8位的输入/输出端口,它们分别是PB,PC和PD.Arduino IDE提供的Blink示例可以帮助我们了解端口的数字输出功能: ...