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

简介: 最近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

目录
相关文章
|
6月前
|
消息中间件 NoSQL 安全
WePush 一款基于模拟点击实现的微信消息推送机器人,安全稳定不封号
WePush 是一个基于微信 Windows 客户端开发的消息推送系统,采用模拟人工点击技术实现消息发送,具有安全稳定、零封号风险的特点。系统通过 HTTP API 接收消息请求并利用 Redis 消息队列异步处理任务,支持群聊和个人消息推送。依赖 FastAPI、wxauto 和 Redis,适用于系统监控提醒等场景,需使用指定版本微信客户端运行。
495 60
|
5月前
|
安全 应用服务中间件 网络安全
从零(服务器、域名购买)开始搭建雷池WAF到应用上线简明指南
本文详细介绍了基于雷池WAF的网站防护部署全流程,涵盖服务器与域名准备、WAF安装配置、网站接入设置及静态文件站点搭建等内容。通过最低1核CPU/1GB内存的服务器配置,完成Docker环境搭建、雷池一键安装及端口设置,实现域名解析、SSL证书配置和防护策略优化。同时支持301重定向与HTTP到HTTPS自动跳转,确保访问安全与规范。最后还提供了使用静态文件搭建网站的方法,帮助用户快速构建具备基础WAF防护能力的网站系统。
从零(服务器、域名购买)开始搭建雷池WAF到应用上线简明指南
|
4月前
|
安全 数据可视化 网络协议
千万别错过!这个国产开源项目彻底改变了你的域名资产管理方式,收藏它相当于多一个安全专家!
Domain Admin 是一款免费开源、专为个人与企业设计的高效域名生命周期管理工具。支持多域名集中管理、自动同步信息、过期提醒与续期预警,提供数据可视化面板及 Webhook 通知功能。采用现代化技术栈(Python+Flask、Vue3.js),界面清爽易用,特别适合中文用户。相比 CentralOps、NetBox 等工具,Domain Admin 功能更全面,安全性更高,是管理域名资产的理想选择。项目地址:https://github.com/dromara/domain-admin
299 3
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
174 1
|
运维 Serverless 网络安全
函数计算产品使用问题之通过仓库导入应用时无法配置域名外网访问,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
11月前
|
运维 监控 安全
在实际应用中,如何选择基于不同域名还是不同 IP 进行代理多服务的配置?
综上所述,在实际应用中选择基于不同域名还是不同 IP 进行代理多服务的配置,需要根据具体的业务需求、可扩展性、性能、安全性以及维护和管理成本等多方面因素进行综合考虑,权衡利弊,选择最适合自己系统架构和运营需求的配置方式。
|
12月前
|
存储 Kubernetes 负载均衡
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
189 1
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
本文详解了在ThinkPHP框架中配置多应用的方法,包括安装扩展、删除默认controller文件夹、创建多应用、修改配置文件以启用多应用、测试访问以及如何配置不同域名访问不同应用的步骤。
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
|
人工智能 网络协议 小程序
重磅升级!阿里云推出首个域名AI大模型应用
重磅升级!阿里云推出首个域名AI大模型应用
735 6
|
监控 Serverless 应用服务中间件
Serverless 应用引擎操作报错合集之删除通配符域名时遇到了报错,该如何处理
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。

热门文章

最新文章