React使用iframe时出现No 'Access-Control-Allow-Origin' CORS报错

当前故障是两个独立问题叠加导致，之前的CORS配置方向存在多处错误：

• 路由组件写法错误，iframe元素根本没有被返回渲染，这是页面空白的直接原因
• 控制台抛出的CORS报错来自本地Socket.IO服务的握手请求，之前仅给Express配置了CORS规则，没有给Socket.IO服务单独配置跨域，且在前端React代码中写app.use设置响应头是完全无效的——前端代码运行在浏览器环境，不存在Express的app实例，响应头只能由后端服务设置
• 手动添加的跨域头配置值格式错误，缺少协议前缀，合法的Origin值必须带http://或https://协议头

1. 修复前端路由渲染逻辑 #

原Route组件的渲染函数中，iframe标签写在return语句之前，React会直接忽略该节点，最终只返回null，页面自然无内容渲染，修改为直接返回iframe元素：

<Route path='/searchEngine' component={() => { 
  return <iframe 
    src="https://gkwhelps.herokuapp.com" 
    title="Search engine"
    style={{width: '100%', height: 'calc(100vh - 64px)', border: 'none'}}
  />
}}/>

JSX语法规则要求，组件渲染函数必须通过return返回需要挂载的DOM节点，写在return之前、没有被返回的节点不会被渲染。

2. 修复后端Socket.IO跨域配置 #

你使用的Socket.IO v4版本不会自动继承Express的CORS配置，必须在初始化服务时单独传入跨域规则，替换原有io初始化代码：

// 原代码 const io = require('socket.io')(server) 替换为以下内容
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:3000", // 本地开发环境前端地址，线上部署替换为实际前端域名
    methods: ["GET", "POST"],
    credentials: true
  }
})

3. 清理无效配置 #

• 删除前端React项目中所有写app.use设置CORS响应头的代码，这类代码在浏览器环境下无法运行，属于无效配置
• 删除手动添加的重复设置Access-Control-Allow-Origin的自定义中间件，直接使用已引入的cors依赖统一配置即可，将原有app.use(cors())修改为：

app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}))

4. 校验前端Socket客户端连接配置 #

确认前端初始化socket.io-client时，传入的连接地址为完整带协议头的http://localhost:5000，缺失协议头会导致浏览器跨域校验异常。

配置修改完成后按以下顺序验证：

1. 完全重启后端Node服务，Socket.IO的配置修改必须重启服务才能生效
2. 刷新前端页面，建议清除浏览器缓存后再操作
3. 点击导航按钮，此时iframe可正常加载目标站点内容，控制台不会再出现Socket.IO相关的CORS报错

补充说明：你要嵌入的目标站点已经配置了全域名允许访问，iframe加载本身不会触发跨域拦截，之前的报错完全是本地后端Socket.IO配置缺失导致，和目标嵌入站点无关。

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