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跨域问题的分析的更多相关文章
- pdf.js跨域加载文件
pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选 本地预览 在pdf.j ...
- 使用 pdf.js 跨域问题的处理方法1
在<使用 pdf.js 在网页中加载 pdf 文件>中详细介绍了 pdf.js 的使用与集成网页开发的基本方法.展示效果如下图: 站点的目录为 http://localhost:8033/ ...
- JS跨域方法及原理
JS跨域分析判断 JS跨域:在不同域之间,JS进行数据传输或通信.比如ajax向不同的域请求数据.JS获取iframe中的页面中的值(iframe内外不同域) 只要协议.端口.域名有一个不同则 ...
- 什么是JS跨域请求
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 5种处理js跨域问题方法汇总(转载)
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断,理还乱,是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
随机推荐
- Ambari架构原理
不多说,直接上干货! Ambari 架构原理图 通过三张图来说明: 第一张架构图告诉我们:Ambari是Hortonworks贡献给社区的.完全开源的.Hadoop生态的集群管理.监控.部署的工具: ...
- GIT - 代码管理工具之命令集
GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...
- python学习之while循环
Python While 循环语句 Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.其基本形式为: while 判断条件: 执行语 ...
- (转)java中对集合对象list的几种循环访问总结
Java集合的Stack.Queue.Map的遍历 在集合操作中,常常离不开对集合的遍历,对集合遍历一般来说一个foreach就搞定了,但是,对于Stack.Queue.Map类型的遍历,还是有一 ...
- spring-boot整合mybatis(1)
sprig-boot是一个微服务架构,加快了spring工程快速开发,以及简便了配置.接下来开始spring-boot与mybatis的整合. 1.创建一个maven工程命名为spring-boot- ...
- JAVA二维数组的复制
JAVA二维数组的复制 笔者今天做一道ccf题目时,遇到要将二维数组拷贝复制时,没有用常规的那种一个一个数的复制,用的是System.arraycopy()来进行复制,下面介绍这个函数的一些注意点: ...
- MongoDB3.4安装配置以及与Robomongo1.1的连接——解决Authentication Failed导致的不能连接问题
本文环境:win10(64)+MongoDB(3.4.5)+Robomongo(1.1) 目录: MongoDB的安装 MongoDB的配置 Robomongo的安装以及与MongoDB的连接 一些新 ...
- Python Socket 简单聊天室1
这是第一版,最简单的,仅仅实现了通信,你收我发,我收你发而已.下篇将介绍,基于异步多线程的聊天室: 客户端: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...
- Springboot+redis 整合
运行环境: JDK1.7. SpringBoot1.4.7 redis3.0.4 1.生成Springboot项目,分别添加web,redis依赖,具体的maven依赖如下 <dependenc ...
- vue指令v-show示例解析
v-show控制元素显示或者隐藏: <div id="app"> <p v-show="isShow">this is a messag ...