vue iframe 跨域

在 Vue 中使用 iframe 跨域涉及到跨域访问的安全限制。如果你想要在 Vue 中嵌入一个跨域的 iframe，可以尝试以下方法：

1. 使用 Vue 的 `vue-cli` 创建一个项目，并进入项目目录。
2. 安装 `http-proxy-middleware`，可以使用以下命令进行安装：

   npm install http-proxy-middleware --save

3. 在项目的根目录下创建一个 `vue.config.js` 文件，并添加以下内容：

   const proxyMiddleware = require('http-proxy-middleware');
   
   module.exports = {
     devServer: {
       before(app) {
         app.use(
           '/api', // 你要跨域访问的接口前缀
           proxyMiddleware({
             target: 'http://example.com', // 你要跨域访问的域名
             changeOrigin: true,
             pathRewrite: {
               '^/api': '', // 将 /api 替换为空字符串
             },
           })
         );
       },
     },
   };

4. 在 Vue 组件中使用 iframe，并将 src 属性设置为跨域接口的 URL，例如：

   <template>
     <div>
       <iframe :src="iframeUrl"></iframe>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         iframeUrl: '/api/cross-domain-url', // 跨域接口的 URL
       };
     },
   };
   </script>

请注意，以上方法只适用于开发环境下的跨域访问。在生产环境中，你可能需要在服务器端进行配置来允许跨域请求。