Ionic v1安卓设备支付跳转异常：如何添加Referer请求头？

我之前也碰到过类似的WebView请求头限制问题，结合Ionic v1和Cordova的特性，给你几个按优先级排序的可行方案：

方案1：用InAppBrowser插件自定义请求头 #

Ionic v1默认的跳转逻辑（比如window.open或location.href）在安卓WebView里，往往不会自动携带网关要求的合法Referer。改用Cordova的InAppBrowser插件并配置请求头是最直接的解决方式：

1. 先确保安装好插件：

cordova plugin add cordova-plugin-inappbrowser

2. 替换原有支付跳转代码，指定符合要求的Referer：

// 替换为网关明确允许的Referer值，比如你的Web端官方域名
const validReferer = 'https://your-authorized-domain.com';
const paymentGatewayUrl = 'https://test.sbiepay.com/secure/AggregatorHostedListener';

// 配置InAppBrowser选项，携带自定义请求头
const browserOptions = `location=yes,headers=${JSON.stringify({ Referer: validReferer })}`;
window.open(paymentGatewayUrl, '_blank', browserOptions);

注意：部分安卓系统或WebView版本对自定义Referer有同源限制，一定要和网关团队确认你设置的Referer在允许范围内。

方案2：通过中间跳转页自动传递Referer #

如果自定义请求头不生效，可以借助页面form提交的特性，让WebView自动携带Referer：

1. 在项目www目录下创建pay-redirect.html页面：

<!DOCTYPE html>
<html>
<body>
    <form id="paymentForm" action="https://test.sbiepay.com/secure/AggregatorHostedListener" method="GET">
        <!-- 如果需要传递支付参数，添加对应的hidden字段 -->
        <!-- <input type="hidden" name="orderId" value="your-unique-order-id"> -->
    </form>
    <script>
        // 页面加载后自动提交表单触发跳转
        document.getElementById('paymentForm').submit();
    </script>
</body>
</html>

2. 在Ionic代码中打开这个本地跳转页：

window.open('pay-redirect.html', '_blank', 'location=yes');

这种方式下，WebView会把本地页面的URL作为Referer发送。如果网关不允许file://协议的Referer，可以把这个中间页部署到网关允许的在线域名下再跳转。

方案3：调试确认请求头状态 #

用Chrome远程调试工具（chrome://inspect）连接你的安卓设备，查看WebView的网络请求详情：

• 找到支付跳转的请求，检查Request Headers里的Referer字段是否存在且符合要求
• 如果Referer仍然缺失，可在config.xml中添加以下配置尝试解除WebView的部分限制：

<preference name="AndroidInsecureFileModeEnabled" value="true" />
<preference name="AllowFileAccess" value="true" />

额外提示 #

• 务必和支付网关团队确认允许的Referer范围，避免设置不符合要求的值
• 如果支付需要POST请求，只需把中间页的form方法改为POST并添加对应参数即可

内容的提问来源于stack exchange，提问作者Sunil Rawat