360 極速瀏覽器攔截支付寶支付鏈接

在Vue項目中涉及到了充值，充值方式大致是兩種，

需求

• 通過微信SDK 支付
• 通過支付寶支付(包含支付寶及支付寶中轉的網銀交易)

對於前端不同於Android的是支付不需要做過多的操作，只需要調用接口就OK了

方式

在項目中配置根路徑，在觸發支付按鈕之後打開新頁面，進行支付，支付完成之後打開網站。

• 微信

// 打開本地頁面，然後在本地頁面中請求訂單信息，進行支付
var routese = this.$router.resolve({ name: 'WechatPay', query: { orderId: ‘id’ }})
window.open(routese.href, '_blank')

• 支付寶

// 在請求完數據之後 使用document 打開，主要的是divForm.innerHTML 攜帶後段返回的數據
await pay({ orderId: 'id', payWay: '2' }).then(res => {
        const div = document.getElementsByTagName('divform')
        if (div.length) {
          document.body.removeChild(div[0])
        }
        const divForm = document.createElement('divform')
        divForm.innerHTML = res.data.htmlBody // res.data.htmlBody
        document.body.appendChild(divForm)
        // // 保持與支付寶默認編碼格式一致，如果不一致將會出現：調試錯誤，請回到請求來源地，重新發起請求，錯誤代碼 invalid-signature 錯誤原因: 驗簽出錯，建議檢查簽名字符串或簽名私鑰與應用公鑰是否匹配
        document.forms[0].acceptCharset = 'UTF-8'
        document.forms[0].setAttribute('target', '_blank') // 新開窗口跳轉
        document.forms[0].submit()
      })

問題

• 通過上述的兩種操作，已經完成了兩種支付，並且也完成了需求，但是在測試的過程中發現，360極速瀏覽器，支付寶支付無效，經過排查，發現是360瀏覽器認爲是不安全的鏈接進行了攔截

• 解決方式

和微信支付一樣打開新的頁面，然後對頁面進行重定向

const newPage = window.open('about:blank')
      const data = { orderId: this.orderEntry.id, payWay: '2' }
      const { href } = this.$router.resolve({ name: 'AliPay', query: data })
      const url = 'http://' + window.location.host + '/' + href
      // 重定向url 到新頁面中
      newPage.location.href = url

在本地創建支付寶支付頁面

<template>
  <div>
    <div v-html="alipayinfo" />
  </div>
</template>

<script>

export default {
  name: 'AliPay',
  data() {
    return {
      alipayinfo: ''
    }
  },
  created() {
    this.toPay(this.$route.query)
  },
  updated() {
    document.forms[0].submit()
  },
  methods: {
  // 請求 返回支付寶數據後進行賦值
    async toPay(data) {
      await pay({ orderId: data.orderId, payWay: data.payWay }).then(res => {
        this.alipayinfo = res.data.htmlBody // res.data.htmlBody
      })
    }
  }
}
</script>

<style scoped>

</style>

經過測試這種方式可以解決360極速瀏覽器攔截的問題，對於Android開發者開發web來說，需要記錄一下，嗯嗯