开发中document.referrer引发的两个错误

1、问题描述

        在一个工作项目中（Vue单页面应用），使用到两个第三方服务：

        1）使用接口https://whois.pconline.com.cn/ipJson.jsp?callback=IPCallBack&ip= 获取IP位置

        2）使用微信H5支付接口实现支付流程

        这两个服务在document.referrer上存在一个冲突：

        1）IP定位接口貌似不允许外部网站调用，它会检查referrer，若是外部网站，则会报403错误。

1

<meta name="referrer" content="no-referrer"/><!-- 隐藏外部链接中的referrer，在head标签中加入meta -->

<meta name="referrer" content="never"/><!-- 兼容IE浏览器-->

        为了解决这个问题，需要在页面head中添加如下两个meta标签

        2）微信H5支付接口在使用时，也会检查referrer，若该信息为空，则会报错“商家参数格式有误，请联系商家解决”，无法进入支付流程。为了解决这个问题，就需要页面head中不能有content="no-referrer"和content="never"的meta标签

2

2、解决方案

        1）当网站初始化时获取IP位置，获取完成后移除这两个meta标签(×)

let meta_1 = document.querySelector('#meta_1')

let meta_2 = document.querySelector('#meta_2')

meta_1.remove()

meta_2.remove()

        但是这样操作以后并没有达到预期的效果。

        2）当网站初始化时获取IP位置，获取完成后修改这两个meta标签的属性值(√)

let meta_1 = document.querySelector('#meta_1')

let meta_2 = document.querySelector('#meta_2')

meta_1.setAttribute('content', 'unsafe-URL')

meta_2.setAttribute('content', 'unsafe-URL')

        如此修改后，问题解决

3