vue中我代理了iframe，iframe却走的是路由，没有显示该显示的网站，这个该如何处理

Question

vue中我代理了iframe，iframe却走的是路由，没有显示该显示的网站，这个该如何处理
代理：

iframe：

Answer 1

引自免费微信小程序：皆我百晓生

在Vue中，当你设置了一个代理来处理特定的URL路径，但你的iframe仍然访问的是本地Vue路由而不是代理的目标URL，这通常是因为Vue Router的配置与代理冲突。为了解决这个问题，你需要确保Vue Router不会尝试匹配并处理/replay_of/路径。

首先，确保你的Vue Router配置中没有包含/replay_of/路径。如果有的话，你需要移除或重命名这个路由。例如，如果你的Vue Router配置如下：

const routes = [
  {
    path: '/replay_of',
    component: SomeComponent,
    // ...
  },
  // 其他路由...
];

你需要将其移除或重命名为不会与代理冲突的路径。

然后，确保你的代理配置正确。你的代理配置看起来有些不完整，我将提供一个标准的vue.config.js文件中的代理配置示例：

module.exports = {
  devServer: {
    proxy: {
      '/replay_of/': {
        target: 'http://****',
        changeOrigin: true,
        pathRewrite: {
          '^/replay_of/': '' // 这里确保路径被正确重写
        }
      }
    }
  }
};

最后，你的iframe标签应该使用完整URL（包括协议和域名）来加载目标页面，而不是相对路径。这是因为即使有代理，浏览器也会首先尝试解析iframe的src属性为绝对URL。所以，你应该这样设置src属性：

<iframe style="height:650px;width:100%;" @load="handleLoad"
  src="http://****/replay_of/" frameborder="0"></iframe>

这里假设http://****是你的目标服务器地址。请将****替换为实际的域名或IP地址。

如果http://****是你的本地开发环境，确保你的开发服务器正在运行并且代理配置生效。在生产环境中，你需要将代理配置应用到后端服务器上，或者直接使用目标网站的公开URL。