VueJS PDF 网页视图

Question

您好，我正在尝试将 pdf 网页视图添加到我的 vue js vuetify 项目中。 我为此选择了 vue-pdf https://github.com/FranckFreiburger/vue-pdf。

我的pdf src是直接作为URL来的，代码是这样的。

<template>
  <pdf src="https://lovezwl.vip/pdf.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

然后我得到一个错误

从原点获取 'https://lovezwl.vip/pdf.pdf' 的访问权限 'http://localhost:8083' 已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

据我所知，CORS 是处理服务器而不是前端的东西。但是此刻我在后端什么都做不了，我必须 从前端想办法。有什么办法可以克服这个错误。

或者你们知道其他任何库都可以很好地使用 URLS 作为 pdf 源吗？

Answer 1

vue-pdf 内部使用 XMLHttpRequest。您需要配置您的 PDF 所在的服务器 (lovezwl.vip) 以发送 CORS 标头以允许您的本地服务器 (localhost) 获取您的文档。至少发送一个像这样的标题：

Access-Control-Allow-Origin: "*"

当然，您可以设置更适合您的情况的更严格的标题。

如果您无法控制服务器并且无法更改配置，则无法使用 vue-pdf 嵌入此 PDF 文件。