javascript - vue2预览pdf出现跨域问题如何解决？

Question

vue2调试h5预览pdf的问题？

1. pdf地址 http://www.xxxx.org.cn/TrendFile/YB_SD_HJ_1mon_20231125_SDMF.pdf 在谷歌浏览器里面可以直接预览，但是放到本地vue的代码里面会报错跨域，iframe也会报错跨域，有什么方法可以正常预览
2. 把静态pdf文件放到static 或者asset文件夹下 通过路径预览，会出现 404的问题

求教该如何正常预览出pdf

<template>  <div>    <pdf :page="pageNum" :src="pdfUrl" @progress="loadedRatio = $event" @num-pages="pageTotalNum = $event"></pdf>  </div></template><script>import pdf from 'vue-pdf'export default {  data() {    return {      pdfUrl: '../../../static/1.pdf',      pageTotalNum: 1,      pageNum: 1,      loadedRatio: 0    }  },  components: {    pdf  },  methods: {    handlePdfChange(val) {      this.pageNum = Number(val)    }  }}</script>

Answer 1

肯定是能放本地的,能看看404错误的地址你是怎么写的

Answer 2

vue.config.js修改配置即可

'/TrendFile': {        target: 'http://www.xxxxc.com',        // eslint-disable-next-line no-undef        ws: false,        changOrigin: true,        pathRewrite: {          '^/': '/'        }      }

Answer 3

这个问题似乎涉及到如何在Vue.js应用程序中正确地预览PDF文件。

1. 关于跨域问题：在本地开发环境中，预览PDF文件时可能会遇到跨域问题。这是因为浏览器安全策略禁止从不同源（协议、域名或端口）加载资源。你可以尝试使用代理服务器来避免这个问题。在Vue.js中，你可以使用vue-cli-service dev:proxy命令来设置代理。例如，如果你的PDF文件位于http://www.sdmf.org.cn/TrendFile/，你可以在命令行中输入以下命令：

vue-cli-service dev:proxy http://www.sdmf.org.cn/TrendFile/

然后，在项目中创建一个名为public/index.html的文件（如果不存在），并在其中添加以下代码来预览PDF文件：

<iframe src="/TrendFile/YB_SD_HJ_1mon_20231125_SDMF.pdf" width="100%" height="600"></iframe>

请注意，你需要将路径更改为实际的PDF文件路径。然后，在本地开发环境中运行应用程序时，应该能够预览PDF文件而不会遇到跨域问题。

2. 关于404问题：如果你将PDF文件放入public或assets文件夹中并尝试通过路径预览它，出现404错误可能是因为文件的路径不正确或文件不存在。请确保PDF文件位于正确的文件夹中，并且路径是正确的。例如，如果PDF文件位于public/TrendFile/YB_SD_HJ_1mon_20231125_SDMF.pdf，则可以通过以下方式预览它：

<iframe src="/TrendFile/YB_SD_HJ_1mon_20231125_SDMF.pdf" width="100%" height="600"></iframe>

请注意，路径应该是相对于应用程序的根目录的。如果问题仍然存在，请检查文件是否存在以及路径是否正确。