Проблема с Post запросом

209

02 апреля 2022, 10:40

Есть такой vue метод:

methods: {
sendTrackerClientData () {
    return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613" , {
      tracking_data: 'some data'
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });
},

}

Который навешивается на событие нажатия кнопки

После попытки отправить данные - в фаербаге можем увидеть вышеописанные предупреждения и ошибку. Попытка добавить заголовки по типу:

return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id="+ this.$store.state.tracker.trackingKeyId , {
   headers: {
       'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        'X-Powered-By': 'bacon'
      },
      tracking_data: this.$store.state.tracker.trackingClientData
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });

Ни к чему не привела. Вопрос: Что я упустил из виду и каким образом можно решить эту проблему?

Answer 1

Если это плагины, может возникнуть такая проблема(оставлю на всякий случай).

Если напрямую импортируем Axios import axios from 'axios'.

Пробуем отправить GET и смотрим его заголовки:

// Заголовки запроса GET 
:authority: seo-gmbh.eu 
:method: GET 
:path: /couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613 
:scheme: https 
accept: application/json, text/plain, */* 
accept-encoding: gzip, deflate, br 
accept-language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7 
cache-control: no-cache 
origin: http://localhost:8080 
pragma: no-cache 
referer: http://localhost:8080/ 
sec-fetch-mode: cors 
sec-fetch-site: cross-site 
user-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Пробуем отправить POST, после котой возникает ошибка

Предварительные заголовки POST
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Читаем последнее предложение ошибки(ЭТО СHROME, у вас этой ОШИБКИ НЕ ВИДНО)

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

Axios по дефолту установил Content-Type: application/json;charset=UTF-8, а сервер не хочет принимать этот тип данных или просто не настроен.

Изменить заголовки по дефолту можно и самому, но это потребует и самостоятельно обрабатывать тело запроса. Оставлю это здесь config-defaults

Вероятнее всего, сервер принимает обычную форму FormData.

form = new FormData()
form.append(key , value)

Пробуем отправить POST с формой:

Axios выдал правильный заголок content-type: multipart/form-data; boundary=----WebKitFormBoundary7H24tt13aCEzW6SQ

// Заголовки POST 
:authority: seo-gmbh.eu 
:method: POST 
:path: /couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613 
:scheme: https 
accept: application/json, text/plain, */* 
accept-encoding: gzip, deflate, br 
accept-language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7 
cache-control: no-cache 
content-length: 153 
content-type: multipart/form-data; boundary=----WebKitFormBoundary7H24tt13aCEzW6SQ 
origin: http://localhost:8080 
pragma: no-cache 
referer: http://localhost:8080/ 
sec-fetch-mode: cors 
sec-fetch-site: cross-site 
user-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 
 
// Тело запроса Form Data 
tracking_data: some_data

... и мы получили нормальный ответ

Пример тестового компонента

<template>
  <div>
    <button v-on:click="clickAx">click</button>
  </div>
</template>
<script>
import axios from 'axios'
// Тело запроса
const body = { tracking_data: 'some_data' /* , ...  */ }
const form = new FormData()
// Если много ключей сразу все и запихиваем
Object.entries(body).forEach(([key, value]) => form.append(key, value))
export default {
  methods: {
    clickAx: function() {
      return axios
        .post(
          'https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613',
          // наши доп-параметры
          form
        )
        .then((response) => {/*...*/})
        .catch(function(error) {/*...*/})
    }
  }
}
</script>