在iframe中打开生产环境URL时遭遇X-Frame-Options: deny错误求助

我拥有本地（local）和生产（PROD）两个React前端环境，尝试在本地页面中以iframe形式打开生产环境URL，目的是通过postMessage实现应用间的数据传输，并已编写如下代码实现相关逻辑，但控制台出现错误：X-Frame-Options: deny。请问是否需要传递特定请求头？仅需从本地调用前端URL以iframe形式打开即可。

现有代码 #

const redirectToAnotherEnvBuilder = async (option) => {
    // 检查是否已打开 drafting iframe
    const isIFrameOpened = document.getElementsByClassName("drafting-iframe");
    if (isIFrameOpened[0]) {
      snackbarRef.current.open(MESSAGES.ERR.DRAFT_ERR);
      return;
    }
    // 检查是否有选中的选项
    if (Object.keys(option).length) {
      // 指定要跳转的应用URL
      const url = `${option?.url}/#/login`;
      // 获取目标环境的origin，用于postMessage
      const builderEnvUrlOrigin = AppUtil.getOriginFromUrl(option?.url);

      const flowInfo = {};
      const basicFlowInfo = FlowService.getBasicFlowInfo();
      const currentUser = UserService.getCurrentUser();
      flowInfo.flowType = FLOW_STATUS.DRAFT;
      flowInfo.businessCode = basicFlowInfo.businessCode;
      flowInfo.flowName = basicFlowInfo.flowName;
      flowInfo.flowTypeId = basicFlowInfo.flowTypeId;
      flowInfo.email = currentUser?.email;
      flowInfo.chatFlowId = selectedFlowTypeInfo?.chatFlowId || "";

      // 将flowInfo转为查询参数格式的字符串
      const flowInfoStringified = Object.entries(flowInfo)
        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
        .join('&');

      const diagramXml = await DiagramService.getCurrentDiagramXml();

      // 要发送的数据
      const dataToSend = {
        flowData: flowInfoStringified,
        xml: diagramXml,
        messageType: REDIRECTED_FLOW.MESSAGE_TYPE,
      };

      setUiState({ ...uiState, cancelDraftIframe: true });
      // 打开iframe用于流程编辑
      openDraftIframe(url, dataToSend, builderEnvUrlOrigin);
    }
  };

  /**
   * 打开iframe
   * @param {string} url
   * @param {{flowData,xml,messageType}} dataToSend
   * @param {string} builderEnvUrlOrigin
   */
  const openDraftIframe = (url, dataToSend, builderEnvUrlOrigin) => {
    // 创建iframe元素
    const iframe = document.createElement('iframe');
    // 设置iframe源地址
    iframe.src = url;
    // 设置iframe属性
    // 根据iframe位置调整宽度，避免布局错位
    iframe.width = "1500%";
    iframe.height = "93%";
    // 添加类名并挂载到页面容器
    iframe.classList.add("drafting-iframe");
    document.getElementById('container').appendChild(iframe);

    // 监听iframe加载完成事件
    iframe.onload = () => {
      // 向iframe内的目标环境应用发送数据
      iframe.contentWindow.postMessage(dataToSend, builderEnvUrlOrigin);
    };
  }

解决方案 #

核心原因

X-Frame-Options: deny是生产环境服务器设置的响应头，作用是禁止任何外部页面将该站点嵌入iframe。前端请求时添加自定义请求头无法绕过这个限制，因为这个规则是浏览器接收到响应后强制执行的。

可行解决路径

1. 修改生产环境服务器配置（有权限时优先选这个）

   • 调整X-Frame-Options值：
     • 改为sameorigin：仅允许同域页面嵌入（如果本地和生产是同域不同环境，可能适用）
     • 改为allow-from https://你的本地开发地址：指定允许嵌入的来源（注意部分现代浏览器对allow-from支持有限）
   • 更推荐使用Content-Security-Policy的frame-ancestors指令，支持多个来源，兼容性更好：
     比如配置响应头Content-Security-Policy: frame-ancestors http://localhost:3000 https://其他允许的地址;

2. 无服务器修改权限时的替代方案

   • 改用新开窗口通信：用window.open打开生产环境页面，替代iframe。新开窗口不受X-Frame-Options限制，依然可以通过postMessage传输数据。示例代码调整如下：

     const openDraftWindow = (url, dataToSend, builderEnvUrlOrigin) => {
       // 打开新窗口
       const newWindow = window.open(url, '_blank', 'width=1200,height=800');
       
       // 轮询检查窗口是否就绪，就绪后发送数据
       const readyChecker = setInterval(() => {
         if (newWindow && !newWindow.closed) {
           newWindow.postMessage(dataToSend, builderEnvUrlOrigin);
           clearInterval(readyChecker);
         }
       }, 500);
     
       // 可选：监听来自新窗口的就绪通知，更可靠的通信时机
       window.addEventListener('message', (event) => {
         if (event.origin === builderEnvUrlOrigin && event.data.type === 'READY') {
           newWindow.postMessage(dataToSend, builderEnvUrlOrigin);
         }
       }, { once: true });
     };
     

   • 本地代理生产环境：启动一个本地代理服务（比如用http-proxy-middleware），将生产环境的请求代理到本地同域下，让iframe加载代理后的地址。但要注意处理生产环境的认证、cookie跨域等问题。

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