【AngularJs】前端使用iframe预览pdf文件报错

<iframe style="width: 100%; height: 100%;" src="{{vm.previewUrl}}"></iframe>

出现报错信息:Can't interpolate: {{vm.previewUrl}}

在ctrl文件中信任该文件就可以了
vm.trustUrl = $sce.trustAsResourceUrl(vm.previewUrl);//信任该文件 

在html中:

<iframe style="width: 100%; height: 100%;" src="{{vm.trustUrl}}"></iframe>

出现新的报错信息:Refused to display 'https://XXXXX' in a frame because it set 'X-Frame-Options' to 'deny'.

 

X-Frame-Options: HTTP 响应头是用来给浏览器 指示允许一个页面 可否在<frame><iframe><embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免 点击劫持 攻击。
X-Frame-Options 有三个属性值:

  1. deny
    表示该页面不允许在frame中展示,即便是在相同域名的页面中嵌套也不允许。
  2. sameorigin
    表示该页面可以在相同域名页面的frame中展示。
  3. allow-from uri
    表示该页面可以在指定来源的frame中展示

后端配置后,成功预览pdf
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/818789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA - 仲裁器的设计实现

一&#xff0c;为什么做仲裁 在多主单从的设计中&#xff0c;当多个源端同时发起传输请求时&#xff0c;这个时候就需要仲裁器来根据优先级来判断响应哪一个源端&#xff0c;向其传输数据。比如&#xff1a;以太网仲裁&#xff0c;DDR仲裁&#xff0c;光纤传图仲裁..... 二&a…

android wifi直连 wifip2pmanager

android wifi直连 wifip2pmanager&#xff1b;使用WiFi 直连&#xff0c;然后通过udp进行通讯。 Android WiFi 直连&#xff08;Wi-Fi Direct&#xff0c;也称为Wi-Fi P2P&#xff09;是一种让两台或多台设备通过Wi-Fi技术直接进行点对点连接的技术&#xff0c;无需借助传统的无…

iOS知识点 ---- 离屏渲染

iOS 中的离屏渲染&#xff08;Off-Screen Rendering&#xff09;是指在绘制某些复杂图形或特殊效果时&#xff0c;系统无法直接在当前屏幕缓冲区进行绘制&#xff0c;而是需要先在额外的离屏缓冲区&#xff08;Off-Screen Buffer&#xff09;中完成渲染工作&#xff0c;然后再将…

electron打包编译国产统信uos系统 arm架构 x86架构 linux mac等环境

electron v21版本以上统信UOS会提示gbm_bo_map错误&#xff0c;可使用v8~v21版本的electron 打包linux包需要再linux系统下运行编译&#xff0c;arch可以指定架构 如果要在统信uos上运行&#xff0c;需要打包成deb格式&#xff0c;在target中修改成deb 或者用第三方软件把app…

three.js捋文档的记录笔记(六):场景 几何体 材质 物体 相机 渲染器的简单理解

三维场景Scene const scene new THREE.Scene();物体形状&#xff1a;几何体 Geometry //创建一个长方体几何对象Geometry const geometry new THREE.BoxGeometry(100, 100, 100); 物体外观&#xff1a;材质Material //创建一个材质对象Material const material new THREE.M…

在Vue3中如何使用H.265视频流媒体播放器EasyPlayer.js?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

【AIGC调研系列】Grok-1.5v与Gpt-4v的效果对比

Grok-1.5V与GPT-4V的效果对比中&#xff0c;Grok-1.5V在多个领域和基准测试中表现优于GPT-4V。具体来说&#xff0c;Grok-1.5V在多学科推理、文档理解、科学图表处理等方面表现出色[1]。它还特别强调了其在理解物理世界的能力上的优势[4][8][12]&#xff0c;并且在RealWorldQA基…

农作物数据分析

,表中文名,表英文名,字段中文名,字段英文名,字段类型,字段描述,字段权限,字段权限描述,字段权限类型 0,cropinfo,作物信息表,作物ID,cropid,UUIDField, 1,cropinfo,作物信息表,作物名称,cropname,CharField, 2,cropinfo,作物信息表,品种,variety,CharField, 3,cropinfo,作物信息…

C语言面试题之奇偶链表

奇偶链表 实例要求 1、给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表&#xff1b;2、第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推&#x…

单链表接口函数的实现(增删查改)

一、单链表的实现形式以及接口函数的声明 #include<stdio.h> #include<stdlib.h> #include<assert.h> typedef int DataType ;typedef struct SListNode {DataType data;struct SListNode* next; }SLTNODE; void SLTPrint(SLTNODE* phead);//打印链表 SLTNO…

Wpf 使用 Prism 实战开发Day20

备忘录功能页面完善以及优化 备忘录功能基本跟前一章节的待办事项差不多一至&#xff0c;就不再做过多的笔述了 一.备忘录功能完整页面源码 MemoView.xaml <UserControl x:Class"MyToDo.Views.MemoView"xmlns"http://schemas.microsoft.com/winfx/2006/xam…

33、链表-排序链表

思路&#xff1a; 首先排序可以使用集合将所有节点放入集合中&#xff0c;然后再根据每个节点值进行排序。这个可以很容易做到&#xff0c;不再赘述 其次就是直接在链表上排序&#xff0c;如何排序可以使用归并排序的方式&#xff0c;代码如下&#xff1a; class Solution {…

opencv | 编译缺失ippicv相关文件解决方案

1.执行cmake后&#xff0c;查看控制台输出信息 ~/VM_data/opencv-4.9.0$ cd buile_temp ~/VM_data/opencv-4.9.0/buile_temp$ cmake ..2.去浏览器打开链接&#xff0c;下载对应的压缩包&#xff0c;解压到 路径&#xff1a;/3rdparty/ippicv/

CSS3 animation-delay 属性

CSS3 animation-delay 属性 实例 等待两秒&#xff0c;然后开始动画&#xff1a; animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */标签定义及使用说明 animation-delay 属性定义动画什么时候开始。 animation-delay 值单位可以是秒&#xff08;s&…

Java多线程(一些常用方法

今天学了一点多线程&#xff0c;感觉有点乱乱的 一.有三种方法可以实现多线程 1.继承Thread类&#xff1b; 直接继承Thread类&#xff0c;重写run方法 package a0415; //第一种执行方法&#xff08;继承Thread类的方法进行实现&#xff09; public class Test1 {public sta…

​LeetCode解法汇总2924. 找到冠军 II

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 一场比赛中共有 n 支队伍&#xff0c;按从…

【云计算】安全组和网络ACL的区别

安全组和网络ACL的区别 ACL&#xff08;Access Control List&#xff09;和 安全组&#xff08;Security Group&#xff09;是两种不同的网络安全控制机制&#xff0c;通常用于管理云计算平台中的网络访问权限。它们在功能和实现上有一些显著的区别&#xff1a; 辨析 范围不同&…

数据库-Redis(16)

目录 76.新的主库选择出来后,如何进行故障的转移? 77.Redis事件机制? 78.Redis文件事件的模型? 79.什么是Redis发布订阅?

ASP.NET MVC企业级程序设计 (EF+三层架构+MVP实现查询数据)

目录 效果图 实现过程 1创建数据库 2创建项目文件 3创建控制器&#xff0c;右键添加&#xff0c;控制器 ​编辑 注意这里要写Home​编辑 创建成功 数据模型创建过程之前作品有具体过程​编辑 4创建DAL 5创建BLL 6创建视图&#xff0c;右键添加视图 ​编辑 7HomeContr…

【zookeeper】安装

第二次安装zookeeper了&#xff0c;蛮记录一下&#xff08;让blog丰富一点~&#xff09; 1. Apache Zookeeper官网下载 2. 解压后创建log和data文件夹 这个其实不一定要建在zookeeper文件夹下&#xff0c;建在任意一个文件夹里都行&#xff0c;只要配置文件中的路径配置能找到…