vue中使用pdf.js跨域问题

在Vue中使用pdf.js跨域问题可以通过在config/index.js中进行配置解决。具体步骤如下：

1. 在config/index.js中的build对象中，找到assetsPublicPath属性，将其值设置为'/'；
2. 在config/index.js中的dev对象中，找到proxyTable属性，添加以下代码：

'/pdf': {
    target: 'http://localhost:8080', //pdf.js所在服务器地址
    changeOrigin: true,
    pathRewrite: {
        '^/pdf': '/static/pdf' //pdf.js所在服务器的相对路径
    }
}

3. 在组件中引入pdf.js，并设置PDFJS.workerSrc属性的值为'/pdf/pdf.worker.js'。

相关问题

vue中使用pdf.js的跨域问题

在使用 vue 中嵌入 pdf.js 时，可能会遇到跨域问题。解决方法是使用 webpack 的代理进行跨域配置。具体步骤如下：

1. 修改 config/index.js 文件中的 proxyTable 配置，加入以下代码：

proxyTable: {
  '/pdfjs': {
    target: 'http://example.com', // PDF.js 所在服务器地址
    changeOrigin: true,
    pathRewrite: {
      '^/pdfjs': '/pdfjs' // 如果 PDF.js 的 URL 不包含 /pdfjs 前缀，则需要将此行修改为相应的前缀
    }
  }
}

2. 在需要使用 pdf.js 的组件中，使用以下代码加载 PDF 文件：

<script>
  import pdfjsLib from 'pdfjs-dist/build/pdf';

  export default {
    data() {
      return {
        pdfDoc: null,
        pageNum: 1
      }
    },
    methods: {
      loadPdf() {
        const loadingTask = pdfjsLib.getDocument('/pdfjs/example.pdf'); // 调用 PDF.js API 加载 PDF 文档
        loadingTask.promise.then(pdf => {
          this.pdfDoc = pdf;
        });
      }
    },
    mounted() {
      this.loadPdf();
    }
  }
</script>

这样就可以解决跨域问题，并加载 PDF 文件了。

vue-pdf预览pdf文件跨域

在使用vue-pdf.js组件预览pdf文件时，如果出现跨域问题，可以通过在后端接口中添加Access-Control-Allow-Origin头部来解决。具体来说，可以在后端接口中添加以下代码：

response.headers['Access-Control-Allow-Origin'] = '*'

其中，*表示允许所有来源的请求访问该接口。如果需要更加安全的设置，可以将*替换为具体的域名。

另外，如果使用的是nginx作为反向代理服务器，也可以在nginx配置文件中添加以下代码来解决跨域问题：

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://backend_server;
}

其中，/api/表示需要代理的接口路径，http://backend_server表示后端服务器的地址。