html页面中展示pdf文件遇到的问题

场景：

在做后台项目的时候，需要在html页面中展示pdf文件，实现在线预览

1.如何在html中展示pdf文件

很简单利用embed标签即可，放上你的pdf的地址就好啦

这么做在测试环境中，很完美，但是在生产环境中就傻眼了

出现了2个问题：

1.This request has been blocked; the content must be served over HTTPS

这个意思是说，你的这个页面是https，但是你访问的资源是http的，所以这个请求被禁止掉了，你必须用https的

这个提示信息说的够明确了吧，后端还说是前端的代码问题，争了半天，就差拿着刀逼着后端改了

后来后端改成https的了，另一个惊喜来了

2.提示403 forbidden

看到这个有点纳闷了，单独访问这个地址是ok的，为啥嵌入到网页里面就提示403呢

后端这时候又开始甩锅了前端代码的问题！！

我天前端有这么大能耐能把你弄到无权访问吗憋屈死了那我就要找出证据来狠狠打打你的脸才是

后来搜到了这篇文章 https://yq.aliyun.com/articles/59499

原来需要配置oss的白名单，现在的这个场景是这个pdf文件不在我们的服务器上

然后给后端说了一下配置白名单是事情

配好后刷新完美了

总结：

报错1 是因为协议不同导致的

报错2 是因为没有配置oss白名单这个pdf文件不在自己的服务器上，浏览器在向服务器C（第三方服务器）发出请求，C取到referer来判断是不是自己的域名，不是的话，就会拦截，所以就403了。

有任何问题，欢迎骚扰^^