Ionic Vue中控制iframe内置导航时遭遇CORS错误求助

为什么你的CORS设置没用 #

你加的Access-Control-Allow-Origin是给AJAX请求用的规则，而直接操作跨域iframe的contentWindow.history属于跨源DOM访问，这部分的同源策略限制根本不适用普通CORS头，浏览器会直接拦截这类操作，跟你设置的那些头没关系。

解决办法 #

1. 改成同源环境 #

最简单的方式是让Ionic应用和iframe加载的网站保持协议、域名、端口完全一致：

• 把Ionic的启动端口改成80：运行命令 ionic serve --port=80
• 或者给Apache网站配置对应子域名，同时让Ionic也使用该子域名，确保两者同源。

2. 用postMessage通信 #

既然直接访问iframe的window对象被禁止，就通过消息传递让iframe页面自己处理导航逻辑：

• 先在localhost:80的网站中添加监听代码：

window.addEventListener('message', (e) => {
  // 只处理来自Ionic应用的消息，避免恶意请求
  if (e.origin !== 'http://localhost:8100') return;
  if (e.data === 'goBack') history.back();
  if (e.data === 'goForward') history.forward();
});

• 然后把Ionic Vue中的navigateBack方法修改为发送消息：

navigateBack() {
  const iframe = this.$refs.izus as HTMLIFrameElement;
  iframe.contentWindow?.postMessage('goBack', 'http://localhost:80');
}

注意：postMessage的第二个参数要明确指定iframe的源，尽量不要用*，避免安全风险。

3. 移动端用InAppBrowser替代iframe #

如果你的应用是移动端APP，直接用Ionic的InAppBrowser插件更合适，它自带导航控制功能，还不受同源策略限制：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(private iab: InAppBrowser) {}

openTargetSite() {
  const browser = this.iab.create('http://localhost:80');
  // 绑定后退按钮事件
  browser.on('backbutton').subscribe(() => {
    browser.executeScript({ code: 'history.back();' });
  });
}

内容的提问来源于stack exchange，提问作者CrashCZ