I'm trying to connect to external API. It is easy when I'm trying to achieve that using classic html form tag with submit input like this:
<form action="https://sandbox.przelewy24.pl/trnRegister" method="post" className="form">
<input type="text" name="p24_session_id" value={this.state.UUID}/>
<input type="text" name="p24_merchant_id" value="79305"/>
<input type="text" name="p24_pos_id" value="79305"/>
<input type="text" name="p24_amount" value="100"/>
<input type="text" name="p24_currency" value="PLN"/>
<input type="text" name="p24_description" value="TYTUŁ"/>
<input type="text" name="p24_client" value="Jan Kowalski"/>
<input type="text" name="p24_address" value="ul. Polska 33/33"/>
<input type="text" name="p24_zip" value="66-777"/>
<input type="text" name="p24_city" value="Poznań"/>
<input type="text" name="p24_country" value="PL"/>
<input type="text" name="p24_email" value="email@host.pl"/>
<input type="text" name="p24_language" value="pl"/>
<input type="text" name="p24_url_return" value="http://myhost.pl/skrypt_ok.php"/>
<input type="text" name="p24_api_version" value="3.2"/>
<input type="hidden" name="p24_sign" value={md5(`${this.state.UUID}|123|100|PLN|123123123`)}/>
<input name="submit_send" value="wyślij" type="submit" />
</form>
And it works just fine. But I would like to achieve the same using post request with axios. So I'm taking all my values and pack it up in the object.
const paymentDetailsObj = {
p24_amount,
p24_currency,
p24_description: formattedTitle,
p24_email: email,
p24_country: 'PL',
p24_url_return: 'https://malewielkieprzygody/thankyou',
p24_url_status: `${baseApiURL}verifypayment`,
p24_transfer_label: formattedTitle,
p24_api_version: '3.2',
p24_merchant_id: 123,
p24_pos_id: 123,
p24_session_id: UUI,
p24_sign: md5(checksum),
};
... and send it with axios...
const res = axios.post(`https://secure.przelewy24.pl/trnRegister`, paymentDetailsObj);
That won't work and the browser shows:
Access to XMLHttpRequest at 'https://secure.przelewy24.pl/trnRegister' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I think I understand the concept of CORS policy. I tried to add some headers to the request but it also fails with the same error:
const res = axios.post(`https://secure.przelewy24.pl/trnRegister`, paymentDetailsObj, {
mode: 'no-cors',
headers: {
'Access-Control-Allow-Origin': '*',
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
withCredentials: true,
credentials: 'same-origin',
crossdomain: true,
});
Now, how can I immitate old-school form request with axios implementation? Thanks
