1、問題描述

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

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

????????2）使用微信H5支付接口實現(xiàn)支付流程

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

????????1）IP定位接口貌似不允許外部網(wǎng)站調(diào)用，它會檢查referrer，若是外部網(wǎng)站，則會報403錯誤。

1

<meta name="referrer" content="no-referrer"/><!-- 隱藏外部鏈接中的referrer，在head標簽中加入meta -->

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

????????為了解決這個問題，需要在頁面head中添加如下兩個meta標簽

????????2）微信H5支付接口在使用時，也會檢查referrer，若該信息為空，則會報錯“商家參數(shù)格式有誤，請聯(lián)系商家解決”，無法進入支付流程。為了解決這個問題，就需要頁面head中不能有content="no-referrer"和content="never"的meta標簽

2

2、解決方案

????????1）當網(wǎng)站初始化時獲取IP位置，獲取完成后移除這兩個meta標簽(×)

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

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

meta_1.remove()

meta_2.remove()

????????但是這樣操作以后并沒有達到預期的效果。

????????2）當網(wǎng)站初始化時獲取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