react 项目中通过 iframe 获取 nginx 服务器里的文件,返回结果为 null

Question

问题描述

我在 react 中 通过 iframe 嵌入 nginx 服务器地址,但是

document.getElementById(IframeID).contentDocument

返回结果为 null

问题出现的环境背景及自己尝试过哪些方法

我试过 contentWindow 也是一样效果
如果只是获取 document.getElementById(IframeID)是有数据返回的

我试过把svg包裹在 html中也是一样的效果,如果通过 js文件把svg放在模板字符串中,然后通过 srcDoc 是可以实现的,但是公司暂时不考虑这种方式

相关代码

粘贴代码文本（请勿用截图）

import React, {Component} from 'react';
import { svg } from './svg.js'
import SvgUtil from "../../utils/SvgUtil";

class Overview extends Component {
  handleLoad = () => {
    // console.log(2);
    const svgIframe = new SvgUtil('overviewIframe')
    console.log(svgIframe);
    // const value = svgIframe.GetID('User')
    // //console.log(value);
    // svgIframe.setIdValue('User', 58)
  }
  
  render() {
    return (
      <iframe src={'http://127.0.0.1:300/svg/overview.svg'} id={'overviewIframe'} className={'iframeStyle'} onLoad={this.handleLoad}>
      </iframe>
      // <iframe srcDoc={svg} id={'overviewIframe'} className={'iframeStyle'} onLoad={this.handleLoad}>
      // </iframe>
    );
  }
}

export default Overview;

svgUtils

class Svg {
  constructor(IframeID) {
     // 这里返回空
     this.iframeSvg = document.getElementById(IframeID).contentDocument
  }
  
  //根据ID获取dom元素
  GetID(id) {
    if (id != null && id != undefined) {
      return this.iframeSvg.getElementById(id);
    }
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

急求大神解答,网上百度了很多,都没解决!!!!谢谢!!!

Answer 1

1、配置 nginx 代理代理地址
config.js:

module.exports={
  resourceAddress:'http://127.0.0.1:300'
}

2、根目录新建 setupProxy.js，内容如下

const {resourceAddress}=require('./configs/config')
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {

  app.use('/proxy', createProxyMiddleware({
    target: resourceAddress,
    changeOrigin: true,
    pathRewrite : {
      '^/proxy' : ''
    },
  }));


};

3、使用

      <iframe src={'/proxy/energyOverview.svg'} id={'energyOverviewIframe'} className={'iframeStyle'} onLoad={this.handleLoad}>
      </iframe>

附上 nginx 配置信息