vue-pdf :src=\pdfurl\" 跨域 access to fetch"

在Vue中，使用vue-pdf插件时，通过设置:src属性来加载PDF文件。当我们使用一个跨域的URL作为PDF文件的来源时，可能会遇到跨域访问的错误。

跨域问题是由浏览器的同源策略引起的，该策略限制了不同源之间的资源访问。因此，当我们在Vue中加载一个跨域的PDF文件时，浏览器会阻止访问并抛出"跨域访问"的错误。

解决这个跨域访问的问题有几种方法：

1. 后端处理：可以在后端服务器上进行跨域配置，允许特定的域名或URL访问PDF资源。通过在响应头中添加Access-Control-Allow-Origin字段，设置允许访问的域名或URL，可以解决跨域访问的问题。

2. 代理服务器：可以设置一个代理服务器来访问PDF资源。通过在Vue的配置中设置代理服务器，让代理服务器去请求PDF资源。这样，由于代理服务器和PDF资源位于同一域名下，就可以避免跨域问题。

3. 前端插件：可以使用vue-resource等第三方插件来实现跨域访问。这些插件具有更灵活的配置选项，可以直接在前端通过设置请求头等方式绕过浏览器的跨域限制。

综上所述，跨域访问的问题在Vue中使用vue-pdf插件时可能会遇到。解决这个问题的方法包括在后端进行跨域配置、设置代理服务器或使用前端插件来绕过浏览器的同源策略。根据具体情况选择合适的方法来解决跨域访问的问题。

相关问题

vue-pdf-signature渲染pdf失败

### vue-pdf-signature 渲染 PDF 失败的原因分析

当遇到 `vue-pdf-signature` 渲染 PDF 文件失败的情况时，可能由多种因素引起。常见的原因包括但不限于：

- **网络请求异常**：如果用于获取 PDF 的 URL 请求被阻止或中断，则无法正常加载文档[^1]。
- **跨域资源共享 (CORS)**：当尝试从不同源加载资源而服务器未设置适当 CORS 响应头时，浏览器的安全机制会阻止该操作并抛出错误提示「has been blocked by CORS policy」[^2]。

### 解决方案

#### 1. 网络请求优化

对于因文件过大而导致的加载缓慢甚至卡死现象，可以考虑采用分片下载的方式逐步读取大尺寸 PDF 文档的内容；另外也可以通过配置 HTTP 缓存策略减少重复请求次数从而提高性能表现。

为了防止由于过快地发起大量并发请求造成系统负担加重进而引发崩溃等问题，在初始化组件之前应当先确认目标地址可达性良好再继续后续流程处理逻辑。

// 使用 axios 或 fetch API 进行预检
async function checkUrl(url) {
    try {
        const response = await fetch(url, { method: 'HEAD' });
        return response.ok;
    } catch (_) {
        return false;
    }
}

#### 2. 设置正确的 MIME 类型

确保 Web 服务器返回给客户端的是正确类型的二进制流数据而非纯文本或其他形式编码后的字符串表示法。这一步骤至关重要因为某些情况下即使路径无误但由于 Content-Type 不匹配也会使得解析过程受阻最终表现为白屏状态。

location /pdfs/ {
    types {
        application/pdf pdf;
    }

    default_type application/octet-stream;
}

#### 3. 配置 CORS 支持

针对跨域访问受限的情形，可以在服务端添加必要的响应头部允许来自特定域名下的页面合法调用接口获取所需资料。具体实现方式取决于所使用的后端框架种类，请参照官方文档完成相应修改工作。

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type

#### 4. 更新依赖库版本

考虑到软件包维护者可能会修复已知漏洞以及引入新特性改进用户体验，建议定期检查当前项目中引用的各项第三方工具是否存在更新可用，并及时升级至最新稳定版以获得更好的兼容性和稳定性保障。

---

Access to fetch at 'http://localhost:9091/user/page?pageNum=2&pageSize=3' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. :9091/user/page?pageNum=2&pageSize=3:1 Failed to load resource: net::ERR_FAILED HomeView.vue:145 Uncaught (in promise) TypeError: Failed to fetch at VueComponent.created (HomeView.vue:145:1) at invokeWithErrorHandling (vue.runtime.esm.js:3017:1) at callHook$1 (vue.runtime.esm.js:4031:1) at Vue._init (vue.runtime.esm.js:5693:1) at new VueComponent (vue.runtime.esm.js:5826:1) at createComponentInstanceForVnode (vue.runtime.esm.js:4544:1) at init (vue.runtime.esm.js:4406:1) at merged (vue.runtime.esm.js:4561:1) at createComponent (vue.runtime.esm.js:6567:1) at createElm (vue.runtime.esm.js:6521:1)

这个错误是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略要求网页只能请求同源（协议、域名、端口号都相同）的资源，否则会出现跨域错误。

根据错误信息，你的前端页面正在通过fetch方法请求一个位于'http://localhost:9091'的资源，但是该资源的响应头中没有包含'Access-Control-Allow-Origin'字段，因此浏览器会拒绝这个请求。

要解决这个问题，你需要在后端服务器的响应头中添加'Access-Control-Allow-Origin'字段，并设置为允许访问的域名，例如设置为'*'表示允许所有域名访问。你可以在后端代码中添加以下代码：

response.setHeader('Access-Control-Allow-Origin', '*');

另外，如果请求中包含自定义的请求头字段，如'Authorization'，你还需要在响应头中添加'Access-Control-Allow-Headers'字段，并指定允许的请求头字段。例如：

response.setHeader('Access-Control-Allow-Headers', 'Authorization');

这样设置后，浏览器就会允许从'http://localhost:8080'发起对'http://localhost:9091'的请求了。

请注意，在生产环境中，应该将允许访问的域名限制为实际需要的域名，而不是使用通配符'*'。这样可以增加安全性。