使用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
相关产品推荐
相关产品推荐

