開發中document.referrer引發的兩個錯誤

1、問題描述

在一個工作項目中（Vue單頁面應用），使用到兩個第三方服務：

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

2）使用微信H5支付接口實作支付流程

這兩個服務在document.referrer上存在一個沖突：

1）IP定位接口貌似不允許外部網站調用，它會檢查referrer，若是外部網站，則會報403錯誤。

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

如此修改後，問題解決

不再報錯