Axios запрашивает то же, что и форма старой школы

Question

Я пытаюсь подключиться к внешнему API. Это легко, когда я пытаюсь добиться этого, используя классический HTML-тег формы с отправкой ввода, например так:

<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>

И это прекрасно работает. Но я хотел бы добиться того же, используя почтовый запрос с axios. Поэтому я беру все свои ценности и упаковываю их в объект.

    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),
    };

... и отправь его с аксиосом ...

  const res = axios.post(`https://secure.przelewy24.pl/trnRegister`, paymentDetailsObj);

Это не сработает, и браузер показывает:

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.

Мне кажется, я понимаю концепцию политики CORS. Я попытался добавить несколько заголовков к запросу, но он также завершился с той же ошибкой:

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,
});

Теперь, как я могу имитировать запрос старой формы с помощью axios? Спасибо

Answer 1

Вы получаете проблемы с CORS из запрошенного источника, и я предполагаю, что вы хотите создать прокси-сервер CORS, чтобы это работало. Я твердо верю, что этот пост поможет вам: ответ Sideshowbarker здесь