document.referrer 为空，导致微信h5支付失败，react框架

最新推荐文章于 2021-11-24 22:57:02 发布

原创最新推荐文章于 2021-11-24 22:57:02 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #bug #vue

日常填坑专栏收录该内容

15 篇文章

订阅专栏

本文解决React项目中集成微信H5支付时遇到的商家参数格式错误问题，通过创建h5pay.html作为中间跳转页避免react-router影响document.referrer。

前端使用框架
react+webpack
路由：react-router-dom 4

出现问题：集成微信h5支付，提示

商家参数格式有误，请联系商家解决

问题原因：document.referrer为空导致失败。

解决思路：
先在微信开放平台授权h5支付安全域名 （域名需通过备案）
在百度了各种方案无果
例如：
1、window.locaiton.href 跳转导致referrer为空
2、使用a标签模拟跳转

发现问题：不管在vue框架中，还是在react框架中 document.referrer 都是为空，怀疑和react-router有关。

解决问题：
1、新建一个h5pay.html中间跳转页，通过跳转页避免react-router进行路由处理。

在返回结果中跳转h5pay.html 需要encodeURIComponent

 window.location.href="./h5pay.html?url="+encodeURIComponent(mweb_url);

h5pay.html页面decodeURIComponent('url')进行跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>跳转中...</title>
    <script>
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }
        window.location.href= decodeURIComponent(getQueryString('url'));
    </script>
</head>
<body>
</body>
</html>