如何在 ReactJS 中向 Iframe 添加标题参数

如何解决如何在 ReactJS 中向 Iframe 添加标题参数

我正在尝试在我的 React 应用程序中添加一个 iframe 组件。但我需要向 url 添加一个身份验证密钥。

我是 React 的新手，我正在尝试这种方式：

import React,{useEffect,useState} from 'react';

function IframeComp() {
  const [content,setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent = '<h1>Some HTML</h1>';
    setContent(fetchedContent);
  },[]);


  return (
      <iframe sandBox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              src={content}>
      </iframe>
  );
}

export default IframeComp;

我在 Stack Overflow (Is it possible to add Request Headers to an iframe src request?) (https://github.com/courajs/pdf-poc/blob/master/script.js) 中找到了解决方案，但在 React 中没有。

我想我必须做这样的事情：

var xhr = new XMLHttpRequest();

  xhr.open('GET',url);
  xhr.onreadystatechange = handler;
  xhr.responseType = 'blob';
  headers.forEach(function(header) {
    xhr.setRequestHeader('Authorization','JWT eyJ0eXAiOiJK');
  });
  xhr.send();

我在正确的轨道上吗？

解决方法

不，不能将标头参数添加到 iframe src-tag。

但作为替代方法，与您的方式类似，您可以使用 fetch-API 或 axios 使用所需的 Http-Headers 获取 html，然后将 html 插入到您的 src-tag 中。

示例：

import React,{ useEffect,useState } from "react";

function IframeComp() {
  const [content,setContent] = useState('');

  useEffect(() => {
    fetch("https://www.example.com",{
      headers: {"Authorization","JWT eyJ0eXAiOiJK"}
    })
      .then(response => response.text())
      .then(data => setContent(data))
      .catch(err => err)
  },[]);

  return (
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              src={content}>
      </iframe>
  );
}

export default IframeComp;