vue-office-docx 访问跨域文件

vue-office-docx 本身是一个用于预览 DOCX 文件的 Vue.js 插件，但它并不直接处理网络请求或跨域问题。当你需要从服务器加载并预览跨域的 DOCX 文件时，跨域问题实际上是在 Vue.js 应用通过 HTTP 请求获取跨域资源时遇到的。

要解决这一问题，你需要在 Vue 应用的配置或开发服务器层面处理跨域：

开发阶段：

在 Vue CLI 项目的 vue.config.js 文件中配置代理（proxy），使得开发环境下的请求能够被转发到目标服务器：

module.exports = {
  devServer: {
    proxy: {
      '/api-docx': { // 假设你的 DOCX 文件是通过 /api-docx 路径访问的
        target: 'http://example.com', // 目标服务器地址
        changeOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/api-docx': '' // 如果后端接口不需要/api-docx前缀，可以去掉
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

之后，在应用中请求 DOCX 文件时，可以通过相对路径访问，实际会被代理到目标服务器：

// 在某个 Vue 组件中
export default {
  data() {
    return {
      docxSrc: '/api-docx/path/to/document.docx'
    };
  }
};
1
2
3
4
5
6
7
8

生产阶段：

在生产环境下，通常需要后端服务支持 CORS（跨源资源共享），即服务器需返回允许跨域的响应头，比如 Access-Control-Allow-Origin。

如果后端是你控制的，可以在后端服务器配置中允许特定源或者任何源（*）访问资源。

如果无法更改后端配置，且生产环境中没有类似于开发环境的反向代理机制，那么可能需要通过后端提供一个中间层服务，由这个服务作为代理去获取 DOCX 文件并转发给前端。