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

1、问题描述

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

1）使用接口 https://whois.pconline.com.cn/ipJson.jsp?callback=IPCallBack&ip= 获取IP位置
2）使用微信H5支付接口实现支付流程

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

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

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

<meta name="referrer" content="no-referrer"/><!-- 隐藏外部链接中的referrer，在head标签中加入meta -->
<meta name="referrer" content="never"/><!-- 兼容IE浏览器 -->

2）微信H5支付接口在使用时，也会检查referrer，若该信息为空，则会报错“商家参数格式有误，请联系商家解决”，无法进入支付流程。

为了解决这个问题，就需要页面head中不能有content="no-referrer"和content="never"的meta标签

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')

如此修改后，问题解决