Vue2单页应用导致的微信支付安全域名问题

本文涉及的产品
.cn 域名,1个 12个月
简介: 最近vue的单页应用在测试时遇到一个比较严重的问题,在微信内调起微信支付老是报错,排查后发现是安全域名的设置有问题。

最近vue的单页应用在测试时遇到一个比较严重的问题,在微信内调起微信支付老是报错,排查后发现是安全域名的设置有问题。vue的单页应用有两种模式,hash和history两种,而hash模式下的url是有一个‘#’的,导致唤起微信支付的url不固定。但是微信的一个商户平台只能添加5个安全域名,如果要把它的多种情况都写入明显是不可能的。而history模式是需要后台去配合的。那怎么单纯的前端去解决呢?

// 例如你的url是这样的

test.com/#/

// 唤起微信支付的页面url是这样的

test.com/#/recharge

// 这种情况下唤起微信支付的url会变得不固定。
// 如果刚重定向完成,可能是这样的

test.com/#/
test.com/#/recharge

// 如果退出微信后再进入,唤起微信支付的url又可能变成这样

test.com

简直被搞得晕头转向有没有。
第一种解决方法就是后台配合使用Vue的history模式了,这样url中没有‘#’,看起来也比较美观一点,官网里有详细的教程。vue-router HTML5 History模式
但是有些情况可能后台不能更改,这时候就只能找其他解决方法了。

第二种方法是在‘#’前加一个‘?’。

// 你的链接就变成了这样

test.com/?#/

// (更难看了有没有……)

// 然后H5的安全域名就可以设置为下面一种了

test.com

// 但是需要注意的是,你的首页地址就要变成带‘/?#/’的形式了,因为‘?’是不会默认添加的
// 首页
test.com/?#/

这样就没有问题了,但是url真的变得很难看。。。

PS:看到有一些人说这种方法会导致微信下的‘返回’键直接退出网站,我测试是没有这种情况的,不知道其他版本。再贴一个知乎的相关链接

原文链接:http://blog.csdn.net/qq_25243451/article/details/78872059

目录
相关文章
|
2月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
37 1
|
3月前
|
运维 Serverless 网络安全
函数计算产品使用问题之通过仓库导入应用时无法配置域名外网访问,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
12天前
|
运维 监控 安全
在实际应用中,如何选择基于不同域名还是不同 IP 进行代理多服务的配置?
综上所述,在实际应用中选择基于不同域名还是不同 IP 进行代理多服务的配置,需要根据具体的业务需求、可扩展性、性能、安全性以及维护和管理成本等多方面因素进行综合考虑,权衡利弊,选择最适合自己系统架构和运营需求的配置方式。
|
1月前
|
存储 Kubernetes 负载均衡
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
30 1
|
5月前
|
网络协议 小程序 生物认证
Web应用&企业产权&指纹识别&域名资产&网络空间&威胁情报
Web应用&企业产权&指纹识别&域名资产&网络空间&威胁情报
|
2月前
|
PHP
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
本文详解了在ThinkPHP框架中配置多应用的方法,包括安装扩展、删除默认controller文件夹、创建多应用、修改配置文件以启用多应用、测试访问以及如何配置不同域名访问不同应用的步骤。
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
|
3月前
|
人工智能 网络协议 小程序
重磅升级!阿里云推出首个域名AI大模型应用
重磅升级!阿里云推出首个域名AI大模型应用
397 6
|
4月前
|
监控 Serverless 应用服务中间件
Serverless 应用引擎操作报错合集之删除通配符域名时遇到了报错,该如何处理
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
3月前
|
网络协议 网络安全 网络架构
【Azure 容器应用】在中国区Azure上创建的容器服务默认应用域名不全
【Azure 容器应用】在中国区Azure上创建的容器服务默认应用域名不全
|
3月前
|
域名解析 网络协议
WeCom——通过企业微信来搭建自己的域名邮箱
WeCom——通过企业微信来搭建自己的域名邮箱
176 0
下一篇
无影云桌面