vue使用iframe预览pdf需要配置跨域

在Vue应用中使用iframe预览PDF文件时，如果PDF位于另一个域名下，可能会遇到跨域限制。为了处理这个问题，你需要配置服务器端允许该URL访问，或者在浏览器端采取一些技巧来解决跨域。

1. **服务器端设置**:
- 如果你有控制服务器权限，可以在服务器上设置CORS（Cross-Origin Resource Sharing），即通过HTTP响应头`Access-Control-Allow-Origin`指定允许哪些源访问资源。

   // Node.js express示例
   res.setHeader('Access-Control-Allow-Origin', 'http://yourdomain.com');

2. **JSONP（JSON with Padding）**:
使用JSONP可以在浏览器支持同源策略的情况下从其他域请求数据，不过这种方法适用于GET请求。将PDF内容作为JSON返回，并包装在一个函数调用内。

3. ** CORS Preflight 请求（OPTIONS）**:
对于POST、PUT等请求，通常需要先发送一个`OPTIONS`请求来检查是否允许跨域。可以在这个请求中返回`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。

4. **vue-cli创建的项目**:
在`main.js`或其他合适的中间件文件中添加CORS处理。例如，如果你使用axios库，可以配置全局代理：

   import axios from 'axios';
   axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 这行很重要
   const instance = axios.create({
     baseURL: process.env.VUE_APP_API_URL,
     withCredentials: true, // 是否带cookie
     transformRequest: [function (data) {
       // 对请求数据做转换
     }],
     transformResponse: [function (data) {
       // 对响应数据做转换
     }],
     headers: {'Content-Type': 'application/json' /*默认值*/}
   });
   window.axios = instance;

记得测试跨域设置是否生效，因为某些浏览器在初次加载时会缓存错误状态，刷新页面或清除缓存可能会看到效果。