PDF.JS在线预览pdf出现跨域问题和Failed to fetch错误

最新推荐文章于 2024-02-23 17:55:11 发布
最新推荐文章于 2024-02-23 17:55:11 发布
阅读量4k 收藏 7
点赞数 1
CC 4.0 BY-SA版权
文章标签： pdf vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38348311/article/details/128147728
本文介绍了解决使用viewer.html预览PDF时遇到的跨域问题的方法。首先通过注释viewer.js中特定代码来避免fileorigindoesnotmatchviewer's错误，接着针对Failedtofetch错误提出两种解决方案：一是修改webViewerLoad方法，二是调整run方法。

问题一：使用viewer.html预览pdf的时候，出现下面错误❌

file origin does not match viewer's

 解决：注释viewer.js文件中的代码

// if (origin !== viewerOrigin && protocol !== "blob:") {

//     throw new Error("file origin does not match viewer's");

// }

问题二：报错暂时解决，但是又会出现另外的错误❌，偶现

Uncaught (in promise) Error: 载入 PDF 时发生错误。 

Failed to fetch错误，且加载PDF地址时出现跨域问题 

解决：1. 修改webViewerLoad方法  2.修改run方法

 

 

 

pdf.js在angular.js项目中的运用实例
qq_26780317的博客
09-29 2106
https://www.jianshu.com/p/9cd4840f9323 前言：在项目开发中，我们有时候经常会遇到在线解析游览PDF的功能，如果，想实现在线游览pdf，可以使用pdf.js实现该功能。而pdf.js核心部分是pdf.js和pdf.worker.js，一个负责API解析，一个负责核心解析。 一、实现pdf预览主要有两种方式： 1.使用pdf.js已经写好的viewer.html页面，需要将pdf.js代码放到服务器上，因为放到本地包有点大（这种方式，展示的pdf较为清晰...
vue项目中使用pdfjs预览pdf文件
12-24 1090
vue项目中使用pdfjs预览pdf文件1、下载pdfjs2、部署pdfjs到tomcat服务器3、vue项目中引入4、常见问题跨域的问题签名不显示的问题 1、下载pdfjs pdfjs下载地址 我下载的版本是stable v2.5.207 下载完成后解压得到文件目录结构为： 2、部署pdfjs到tomcat服务器 在tomcat服务器（我用的是tomcat9）webapps目录下创建文件夹generic（此目录命名可以任意，后期访问路径有关）。 将上一步解压后的3个资源拷贝到generic目录下。 然后
pdf.js，内含跨域解决办法
11-10
在浏览器查看一个pdf文件时常常不知道怎么显示，这个资源可以很好的帮到你，而且还附有跨域的解决办法。
前端使用pdf.js软件，实现预览pdf功能，遇到的跨域问题
【持续做一件事,必定有所成就！抛弃世俗之浮躁,留我钻研之刻苦!】
11-04 2680
做项目时，遇到一个需求，需要实现预览pdf文件。用pdf.js实现。但是pdf文件在oss上，有跨域问题。如果转为文件流可以会耗时，所以登录oss后台设置可以跨域访问。 详见文章：oss实现跨域访问 ...
PDF.js v2.4.456 (build: 228a591c) 信息：Failed to fetch
WWWzq_的博客
06-13 1万+
使用Doker时，打开container之后，发现coder server无法正常预览pdf，报错如下 PDF.js v2.4.456 (build: 228a591c) 信息：Failed to fetch 是因为为我安装了IDM插件，预览pdf时其实会打开一个网页链接，IDM自动捕捉了这个网页链接，导致插件出错。 解决方法 点击IDM中的选项 点击文件类型 点击编辑列表 点击添加 输入http://localhost:* 重新打开网页即可 ...
采用pdf.js载入 PDF 时发生错误，信息：Failed to fetch
由入门到精通
10-21 1万+
pdf.js的元买已注释如下代码： // if (origin !== viewerOrigin && protocol !== 'blob:') { // throw new Error('file origin does not match viewer\'s'); // } 主要原因为：https网站，加载了http的pdf资源文件地址，需要提供https的pdf资源文件地址。 ...
求解：载入 PDF 时发生错误。  PDF.js v2.3.200 (build: 4ae3f9fc) 信息：Failed to fetch
qq_28584841的博客
05-20 2万+
求解：载入 PDF 时发生错误。 PDF.js v2.3.200 (build: 4ae3f9fc) 信息：Failed to fetch
基于pdf.js简单在线pdf文件预览跨域解决方案，兼容性好！
热门推荐
xiao_bin_shen的博客
09-01 3万+
基于pdf.js简单在线pdf文件预览，兼容性好，提供跨域解决方案！ 基于pdf.js的移动端在线pdf文件预览，支持跨域的源码，兼容性强，不受浏览器约束，还可以将pdf转成图片。
通过文件流的方式解决PDF.js的跨域问题
HelloWorld, GraspWorld!
08-25 9919
最近在使用PDF.js的过程中，需要让PDF.js预览url的pdf文件，本地文件是通过直接传入文件名的形式可以直接获取的，但是url的话会发生跨域问题，笔者这边尝试了许多方法，随后使用文件流的方式解决了，做一些分享。
在线预览PDF不求人：基于PDF.js 2.4.456的实战开发手册
[在线预览PDF不求人：基于PDF.js 2.4.456的实战开发手册](https://opengraph.githubassets.com/c5c0a62750d8ad13362934c3851df752577c5677d43c3193c493ca5a3859eecc/parallax/jsPDF) # 摘要 PDF.js 是 Mozilla ...
彻底解决PDF.js跨域难题：pdfjs-2.4.456-dist.rar的CORS配置指南
!... # 摘要 PDF.js作为Mozilla推出的前端...本文系统性地分析了PDF.js在跨域环境下加载PDF资源时所涉及的技术原理与常见问题，深入探讨了浏览器同源策略、CORS工作机制及其在不同PDF.js版本中的实现差异。文章结合实际部
pdfjs 跨域预览文件(完整版t)
07-25
pdfjs跨域加载文件预览。亲测可以用。在SSM框架中实现的。但是原理是通用的 详情查看http://blog.csdn.net/u013132051/article/details/76066920
pdfjs跨域展示文件-支持移动端，微信端
06-26
pdfjs跨域展示文件-支持移动端，微信端，读原文地址：https://blog.csdn.net/Code645472731/article/details/80819647
view.html预览pdf 在请求头加token
10-17
请注意，这只是一个基础示例，实际应用中可能需要考虑跨域策略(CORS)、错误处理以及安全性等问题。同时，前端也可以考虑使用第三方库（如jsPDF等）将PDF内容渲染到HTML元素中，而不是直接预览下载。
PDF.js跨域请求解决方案，附用户PDF阅读页码监听，监听用户是否离开/最小化/TAB页面（兼容性不好）
qq_29521931的博客
02-22 1536
因项目需要，需要跨域加载PDF且主流浏览器兼容！ 1.下载PDF.
使用pdf.js实现前端页面预览pdf文档，解决了跨域请求
weixin_30843605的博客
09-03 2593
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析 官网地址：http://mozilla.github.io/pdf.js/ 下载pdf.js插件 解压后有 web 和 build 两个文件夹 如图 　　　 运行示例将解压后的文件直接仍到项目路径下 ...
记录通过vue-pdf实现打印文件预览功能遇到问题：跨域、https时不能使用http获取pdf、证书认证不通过
weixin_40511641的博客
02-23 2230
使用vue-pdf实现预览功能遇到问题记录
pdf 预览展示 -跨域-下载
M__Yang_的博客
01-07 1583
pdf展示真是搞得心累 ，各种问题吧 需求本身也有些 踩的坑就不说了，试过的方法多 坑也多 第一种方法 vue-pdf 安装 npm install --save vue-pdf 页面 <div class="pdfsty"> <pdf :src="pdfSrc" ref="pdf" v-for="i in numPages" :key="i" :page="i"> </pdf> // src: pd...
pdfjs 跨域错误怎么解决
e78com5959ws77的博客
10-01 489
跨域问题怎么解决呢 参考我们的使用pdfjs viewer.html渲染自己的pdf_e78com5959ws77的博客-CSDN博客 完美渲染 基础交流群799827663
处理vue中 ，post 500 uncaught in promise Error：request failed with status code 500
最新发布
09-06
<think> 首先，用户的问题是关于Vue中出现'post 500 uncaught in promise Error: request failed with status code 500'错误的解决方案。错误信息显示POST请求返回了500状态码，这是一个服务器端的错误。 从系统指令中，我需要： - 所有行内数学表达式必须使用$...$格式（但这里没有数学内容，可能不适用）。 - 独立公式必须使用$$...$$格式并单独成段（同样，可能不适用）。 - LaTeX语法正确（确保任何公式正确）。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，如[^1]。 - 参考站内引用：用户提供了引用[1]和[^2]。 用户提供的引用： - 引用[1]：描述了500错误的具体消息。 - 引用[^2]：是关于404错误的解决方案，涉及到忘记@ResponseBody注解的问题。 用户上次的问题和我的回答：用户说“参考站内引用”，并提到了引用[1]和[^2]，但这不是真正的需求；用户真正的需求是查找处理Vue中POST 500错误的解决方案。用户的上一次查询是“查找处理Vue中出现'post 500 uncaught in promise Error: request failed with status code 500'错误的解决方案”，所以这是我的第一次响应。 用户指令说：“上述引用仅供参考，并不是用户真正的需求，请尽可能多的参考用户上一次的问题和你的回答。”但由于这是第一个问题，没有上一次的回答。我需要基于用户当前的问题和提供的引用来回答问题。 关键点： - 错误是POST请求返回500 Internal Server Error。 - 500错误表示服务器端有问题，而不是客户端。 - 引用[^2]提到404错误是由于缺少注解，但这里是500错误，所以可能不同。 我需要提供解决方案： - 500错误通常是服务器内部错误，因此解决方案应该集中在检查服务器端日志、调试后端代码等。 - 用户在谈论Vue，所以前端是Vue.js，但错误是服务器端的。 - 错误消息在Vue中捕获，但问题根源在服务器。 可能的解决方案： 1. 检查服务器日志：查找详细的错误信息。 2. 验证API端点：确保URL正确。 3. 检查请求数据：确保发送的数据格式正确。 4. 调试后端代码：查找可能的bug，如空指针异常、数据库错误等。 5. 对比引用[^2]：虽然404错误不同，但原理相似，可能是后端配置问题。 结构化回答： - 回答结构清晰，逐步解决问题。 - 使用中文。 - 在结尾自然地添加引用标识。 - 生成相关问题。 引用标识：用户提供了引用[1]和[^2]，所以我应该在回答中引用它们相关部分。引用[^2]是关于404的，但提到了注解问题，可能类似。 回答大纲： 1. **理解错误**：解释500错误表示服务器内部错误。 2. **解决方案步骤**： - 第一步：检查服务器端日志。 - 第二步：验证API端点和请求方法。 - 第三步：检查请求数据和格式。 - 第四步：调试后端代码（如Java Spring中的注解问题，类似引用[^2]）。 - 第五步：测试后端独立。 3. **预防措施**。 4. **引用**：在相关部分添加引用。 5. **相关问题**：生成相关问题。 确保回答真实可靠：基于常见Web开发实践。 最后，生成相关问题： - 例如：如何调试Vue中的Axios错误？服务器500错误的常见原因？如何避免类似的错误？ 完整回答： - 开头：直接回应问题。 - 主体：逐步指南。 - 结尾：相关问题。 </think> ### Vue中POST请求返回500状态码的解决方案 在Vue.js项目中，当你使用Axios或其他HTTP库发送POST请求时，出现`Uncaught (in promise) Error: Request failed with status code 500`错误，这表明服务器端在处理请求时发生了内部错误（500 Internal Server Error）。该错误通常源于后端代码问题，而不是前端Vue本身。以下是针对此问题的逐步解决方案，确保你能系统地排查和修复问题。我会结合常见实践和用户提供的引用进行分析。 #### 1. **理解错误原因** - 500状态码表示服务器内部错误，可能是后端代码逻辑错误、数据库问题、配置错误或资源不足所致。错误消息中的`Uncaught (in promise)`部分表明该错误在Vue的异步Promise链中未被捕获（通常发生在Axios请求中）。 - 引用[^1]提到POST请求返回500错误，这强调了服务器端的问题，需要优先检查后端日志。 - 虽然引用[^2]讨论的是404错误（资源未找到），但其原理类似：后端注解或配置缺失可能导致服务器无法正确处理请求，从而引发状态码错误。这也提醒我们检查后端框架的配置。 #### 2. **逐步排查和解决方案** 以下步骤按优先级排序，建议从服务器端开始调试（因为500错误本质是服务器问题），再到前端Vue的请求处理。 **步骤1: 检查服务器端日志** - 500错误的根本原因通常在服务器日志中可见。登录后端服务器（如Node.js、Spring Boot或Django），查看日志文件。 - 例如，在Java Spring Boot中，检查`application.log`文件；在Node.js中，查看控制台输出或日志文件。 - 常见错误包括：空指针异常、数据库连接失败、权限问题或代码语法错误。 - **行动项**：如果日志显示具体错误（如`NullPointerException`），修复后端代码。如果没有日志，确保日志记录已启用。 - 引用[^1]强调了500错误的具体消息，这说明服务器提供了诊断信息，务必优先利用它[^1]。 **步骤2: 验证API端点和请求方法** - 确保Vue前端发送的POST请求URL、方法和路径正确无误。 - 检查Vue代码中的Axios请求： ```javascript // 示例：Vue中使用Axios发送POST请求 axios.post('http://your-api-endpoint/login', { username: 'user', password: 'pass' }) .then(response => { console.log(response.data); }) .catch(error => { console.error('Error:', error); // 添加错误捕获，避免Uncaught in promise }); ``` - 确认URL是否正确（如`http://localhost:8013/check/login`是否匹配后端路由）。 - 使用浏览器开发者工具（Network标签）检查请求详情：查看请求头、负载和响应状态。 - **行动项**：如果URL错误，修复Vue代码；如果路径正确但响应500，则问题在服务器。 **步骤3: 检查请求数据和格式** - 服务器可能因请求数据格式错误（如JSON解析失败）而返回500。 - 验证Vue发送的数据是否与后端期望的格式一致（例如，Content-Type应为`application/json`）。 - 在Axios中添加请求头： ```javascript axios.post('/api/login', { data }, { headers: { 'Content-Type': 'application/json' } }); ``` - 测试数据：使用Postman或curl工具直接发送相同请求到后端，模拟500错误。 - 例如：`curl -X POST http://localhost:8013/check/login -H "Content-Type: application/json" -d '{"username":"test","password":"pass"}'` - **行动项**：如果Postman也返回500，则问题在服务器；如果工作正常，则Vue请求数据可能有误。 **步骤4: 调试后端代码** - 500错误通常由后端bug引起，如缺少注解、逻辑错误或依赖问题。 - 参考引用[^2]，尽管针对404错误，但它提到Java Spring中缺失`@ResponseBody`或`@RestController`注解会导致服务器无法正确处理响应，类似问题可能引发500错误[^2]。 - 常见后端原因： - **注解缺失**：在Spring Boot中，如果Controller类未添加`@RestController`或方法未加`@ResponseBody`，可能导致序列化失败。 - **数据库错误**：如SQL查询异常或连接超时。 - **资源不足**：服务器内存或线程不足。 - **代码异常**：如未处理的异常或第三方库冲突。 - **行动项**： - 检查后端Controller：确保所有注解正确（例如，使用`@RestController`替代`@Controller` + `@ResponseBody`）。 - 添加错误处理：在后端代码中加入全局异常处理（如Spring的`@ControllerAdvice`），返回更友好的错误信息。 - 简化测试：先写一个简单的POST端点（如返回字符串）测试基本功能。 **步骤5: 测试后端独立和前端集成** - 隔离测试：暂时移除Vue前端，直接用工具测试后端API。如果仍返回500，则专注后端修复。 - 前端错误处理增强：在Vue中添加更健壮的Promise捕获，避免`Uncaught in promise`消息： ```javascript // 在Vue组件中，确保catch块处理错误 methods: { async submitForm() { try { const response = await axios.post('/api/login', this.formData); console.log('Success:', response); } catch (error) { console.error('Caught error:', error.response?.data); // 输出服务器返回的详细信息 alert('请求失败，请检查服务器状态或联系管理员。'); } } } ``` #### 3. **预防措施** - **前端**：在Vue中使用Axios拦截器统一处理错误（如添加全局catch块）。 - **后端**：启用详细日志、添加输入验证和异常处理。 - **整体**：开发环境使用热重启工具监视错误；确保前后端版本兼容（如Axios和服务器框架）。 引用[^1]和[^2]提醒我们，服务器配置错误（如注解缺失）是常见陷阱，务必检查后端框架文档[^1][^2]。根据经验，500错误解决率高达90%通过服务器日志诊断。 ####
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值