react插入meta标签，解决Https链接失效问题

react外部链接失效问题

react外部链接在生产环境报错Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'.

原因：HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。

解决方法：

页面的head中加入：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

意思是自动将http的不安全请求升级为https

由于react页面没有head开放出来，需要通过js将meta标签添加进去

 

componentWillMount() {   //初始化时在页面加载完成前执行

    this.appendMeta()

  }

  componentWillReceiveProps(){  //刷新页面时执行

    this.appendMeta()

  }

  appendMeta = () =>{

    //在head标签插入meta标签，解决在生产环境链接失效问题

    const metaTag = document.getElementsByTagName('meta');

    let isHasTag = true;

    for(let i=0;i<metaTag.length;i++){   //避免重复插入meta标签

      const httpEquiv = metaTag[i].httpEquiv;

      if(httpEquiv == 'Content-Security-Policy'){

        isHasTag = false;

      }

    }

    if(isHasTag){

      const headItem = document.head;

      let oMeta = document.createElement('meta');

      oMeta.setAttribute('http-equiv','Content-Security-Policy');

      oMeta.content = 'upgrade-insecure-requests';

      headItem.appendChild(oMeta)

    }

  }