Getting x-Frame-Options as deny error when opening url in iframe

Question

I have two env's lets say local and PROD . I am trying to open PROD url as iframe on local url.

Both are react js urls frontend.

Purpose is to transfer data from one application to another using postMessage. Applied the logic in the below mentioned code .

I am getting error as in console:-

X-Frame-Options deny

Is their any kind of Headers that we need to pass . Just calling frontend url from local to open as iframe

const redirectToAnotherEnvBuilder = async (option) => {
    // check if drafting i frame already opened.
    const isIFrameOpened = document.getElementsByClassName("drafting-iframe");
    if (isIFrameOpened[0]) {
      snackbarRef.current.open(MESSAGES.ERR.DRAFT_ERR);
      return;
    }
    // check if any option is selected
    if (Object.keys(option).length) {
      // Specify the URL of the application you want to redirect to
      const url = `${option?.url}/#/login`;
      // need origin to send data to another application
      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 || "";

      // Convert flowInfo properties to strings
      const flowInfoStringified = Object.entries(flowInfo)
        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
        .join('&');

      const diagramXml = await DiagramService.getCurrentDiagramXml();

      // Data to be sent as query parameters
      const dataToSend = {
        flowData: flowInfoStringified,
        xml: diagramXml,
        messageType: REDIRECTED_FLOW.MESSAGE_TYPE,
      };

      setUiState({ ...uiState, cancelDraftIframe: true });
      // open the iframe for drafting the flow
      openDraftIframe(url, dataToSend, builderEnvUrlOrigin);
    }
  };

  /**
   * Open the iframe
   * @param {string} url
   * @param {{flowData,xml,messageType}} dataToSend
   * @param {string} builderEnvUrlOrigin
   */
  const openDraftIframe = (url, dataToSend, builderEnvUrlOrigin) => {
    // Create an iframe
    const iframe = document.createElement('iframe');
    // Set the iframe source to the URL
    iframe.src = url;
    // Set iframe attributes
    // based on ifram location it is taking half page with on 100% 
    // so on increasing the width we have proper alignment of the iframe
    iframe.width = "1500%";
    iframe.height = "93%";
    // Append the iframe to a visible container in the UI
    iframe.classList.add("drafting-iframe");
    document.getElementById('container').appendChild(iframe);

    // Listen for iframe load event
    iframe.onload = () => {
      // Post the data to the another Env builder window in iframe
      iframe.contentWindow.postMessage(dataToSend, builderEnvUrlOrigin);
    };
  }

Any Help on this ?