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

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

服务器端设置:

如果你有控制服务器权限，可以在服务器上设置CORS（Cross-Origin Resource Sharing），即通过HTTP响应头Access-Control-Allow-Origin指定允许哪些源访问资源。// Node.js express示例
res.setHeader('Access-Control-Allow-Origin', 'http://yourdomain.com');
登录后复制

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

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

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;
登录后复制

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