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来说，需要记录一下，嗯嗯