You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Fetch API向Opayo服务器POST数据时遭遇Error 500求助

用Fetch API提交Opayo支付表单出现500错误

我正在开发一个能将用户重定向到Opayo服务器支付页面的简易表单。使用基础HTML表单提交时,能从https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp获取正确响应(返回“NextURL”),基础表单代码如下:

<form name='OpayoForm' id='OpayoForm' method='POST' action='https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp'>
        <input type='hidden' id='VPSProtocol' name='VPSProtocol' value='4.0' />
        <input type='hidden' id='TxType' name='TxType' value='PAYMENT' />
        <input type='hidden' id='Vendor' name='Vendor' value='VENDORCODE' />
        <input type='hidden' id='VendorTxCode' name='VendorTxCode' value='VENDORTXCODE' />

        <input type='hidden' id='Amount' name='Amount' value='250.00' />
        <input type='hidden' id='Currency' name='Currency' value='GBP' />
        <input type='hidden' id='Description' name='Description' value='Test Payment' />
        <input type='hidden' id='NotificationURL' name='NotificationURL' value='https://www.myurl.com/notify/' />

        <input type='text' id='BillingSurname' name='BillingSurname' value='Surname' />
        <input type='text' id='BillingFirstnames' name='BillingFirstnames' value='Firstname' />
        <input type='text' id='BillingAddress1' name='BillingAddress1' value='Ad1' />
        <input type='text' id='BillingCity' name='BillingCity' value='City' />
        <input type='text' id='BillingPostCode' name='BillingPostCode' value='AA000AA' />
        <input type='text' id='BillingCountry' name='BillingCountry' value='GB' />
        <input type='text' id='BillingPhone' name='BillingPhone' value='01234567890' />

        <input type='text' id='DeliverySurname' name='DeliverySurname' value='Surname' />
        <input type='text' id='DeliveryFirstnames' name='DeliveryFirstnames' value='Firstname' />
        <input type='text' id='DeliveryAddress1' name='DeliveryAddress1' value='Ad1' />
        <input type='text' id='DeliveryCity' name='DeliveryCity' value='City' />
        <input type='text' id='DeliveryPostCode' name='DeliveryPostCode' value='AA000AA' />
        <input type='text' id='DeliveryCountry' name='DeliveryCountry' value='GB' />

        <input type='email' id='CustomerEMail' name='CustomerEMail' value='noone@nowhere.com' />

        <input type='hidden' name='Website' value='https://www.myurl.com/' />

        <input type='submit' name='submit' value='Pay Now' />
    </form>

但尝试通过Fetch API提交该数据时,控制台出现500错误,且无其他可用排查信息。

相关JS代码如下:

<script>
        async function FetchResponse() {
            var OpayoForm = document.getElementById('OpayoForm');
            /* //For creating post data in x-www-form-urlencoded format
            var data = [];
            for (let i = 0; i < (OpayoForm.elements.length - 1); i++) { //Loop the form, we aren't interested in the submit button. 
                data.push(encodeURIComponent(OpayoForm.elements[i].name) + "=" + encodeURIComponent(OpayoForm.elements[i].value));
            }
            data = data.join("&");
            */ 

            // For creating post data in form-data format
            var data = new FormData();
            for (let i = 0; i < (OpayoForm.elements.length - 1); i++) { //Loop the form, we aren't interested in the submit button. 
                data.append(OpayoForm.elements[i].name, OpayoForm.elements[i].value);
            }

            fetch("https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp", {
            //fetch("https://www.myurl.com/testFetch.php", { //test page for checking Fetch is posting data
                    method: 'POST',
                    mode: "no-cors",
                    /*headers: {
                        //'Content-Type': 'application/x-www-form-urlencoded',
                        //'Content-Type': 'multipart/form-data',
                    },*/ //I have tried with and without headers to allow the browser to decide. 
                    body: data,
                })
                .then(response => response.text())
                .then((response) => {
                    var lines = response.split(/\r?\n|\r|\n/g);
                    var result = [];
                    for (let a = 0; a < lines.length; a++){
                        line = lines[a].split('=');
                        result[line[0]] = line[1];
                    }
                    console.log(result);//check result....
                    //window.location.href = result["NextURL"];//redirect to the payment page, would check this variable in production.
                })
                .catch(err => console.log(err))
        }
    </script> 

我已尝试以*x-www-form-urlencoded和form-data*格式提交数据(代码中已注释相关尝试),且通过自有页面testFetch.php测试Fetch函数,该页面以Opayo相同格式输出POST数据,测试无问题。PHP代码如下:

<?php
foreach ($_POST as $key => $value) {
    echo $key;
    echo "=";
    echo $value . PHP_EOL;
}
?>

我不确定遗漏了什么,在我看来FetchResponse()函数应与基础HTML表单发起相同请求,但为何报错?

内容的提问来源于stack exchange,提问作者Robin Wright

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 08:45:03