React Iframe：访问不同端口的localhost引发跨域安全错误

方法1：配置后端CORS响应头 #

在运行于localhost:1234的服务端，添加允许localhost:3000跨域访问的响应头。若需操作iframe DOM或传递凭证，需补充对应配置：

• 核心响应头：Access-Control-Allow-Origin: http://localhost:3000
• 需携带Cookie时添加：Access-Control-Allow-Credentials: true
• Node.js/Express示例：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

方法2：前端服务配置反向代理 #

通过代理让iframe的src变为同域路径，绕过跨域限制：

• React项目：在package.json中添加代理字段

  "proxy": "http://localhost:1234"
  

  之后iframe的src设为'/'，会自动代理到http://localhost:1234
• Vite项目：在vite.config.js中配置代理

  export default {
    server: {
      proxy: {
        '/iframe': {
          target: 'http://localhost:1234',
          changeOrigin: true
        }
      }
    }
  }
  

  之后iframe的src设为'/iframe'即可

方法3：正确禁用Chrome网页安全 #

之前操作无效大概率是未彻底关闭Chrome进程，正确步骤：

1. 关闭所有Chrome窗口（含后台进程）
2. 用命令行启动Chrome并添加安全禁用参数：
   • Windows：

     chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
     

   • Mac：

     open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome_dev"
     

   • Linux：

     google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"
     

方法4：用postMessage实现跨域交互 #

若无需直接访问iframe DOM，仅需父子页面传递数据，使用postMessage即可：

• 父页面（localhost:3000）发送消息：

  const iframe = document.getElementById('your-iframe-id');
  iframe.contentWindow.postMessage('需要传递的数据', 'http://localhost:1234');
  

• 子页面（localhost:1234）监听消息：

  window.addEventListener('message', (event) => {
    // 验证来源，防止恶意消息
    if (event.origin === 'http://localhost:3000') {
      console.log('收到父页面消息:', event.data);
      // 可回复消息
      event.source.postMessage('已收到', event.origin);
    }
  });
  

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