Передача заголовков с помощью POST-запроса axios

135

Я написал запрос POST axios, как рекомендовано в документации пакета npm, например:

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

И это работает, но теперь я модифицировал свой серверный API, чтобы он принимал заголовки.

Тип содержимого: 'приложение / json'

Авторизация: 'JWT fefege ...'

Теперь этот запрос отлично работает в Postman, но при написании вызова axios я перехожу по этой ссылке и не могу заставить его работать.

Я постоянно получаю 400 BAD Requestошибку.

Вот мой измененный запрос:

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

Любая помощь приветствуется.

Jagrati
источник

Ответы:

242

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

Измените свой запрос axios, например:

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })
Шубхам Хатри
источник
@KishoreJethava, 500 - это внутренняя ошибка сервера, можете ли вы проверить на стороне сервера, поступают ли заголовки или есть ли еще какая-то ошибка
Шубхам Хатри
@KishoreJethava, вы можете просто зарегистрировать заголовки на своем сервере и посмотреть, получаете ли вы правильные значения
Шубхам Хатри
Разве вам не нужно публиковать данные? Также убедитесь, что this.state.token содержит значение
Шубхам Хатри
Давайте продолжим эту дискуссию в чате .
Кишор Джетхава
@ShubhamKhatri, могу я попросить вас взглянуть на axiosсвязанный с этим вопрос здесь: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
37

Вот полный пример запроса axios.post с настраиваемыми заголовками.

var postData = {
  email: "test@test.com",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

Мэтью Райдаут
источник
столкнулся с этой проблемой для запроса на получение. Ответ приходит в формате xml. Это не решает проблемы.
Эсвар 05
3

Это может быть полезно,

const data = {
  email: "me@me.com",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })
Примечание: все коды состояния выше 400 будут пойманы в блоке захвата Axios. Кроме того, заголовки не являются обязательными для метода post в Axios.

Blockquote

Blockquote

Фахд Джейми
источник
2

Ответ Шубхама мне не подошел.

Когда вы используете библиотеку axios и передаете пользовательские заголовки, вам необходимо создать заголовки как объект с ключевым именем «заголовки». Ключ заголовков должен содержать объект, здесь это Content-Type и Authorization.

Пример ниже работает нормально.

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...' 
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })
Хемадри Дасари
источник
1

Вы также можете использовать перехватчики для передачи заголовков

Это может сэкономить вам много кода

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});
Израиль Кусаев
источник
Я бы предложил использоватьconfig.method.toUpperCase()
Константин
@ Константин, я думаю, это уже заглавные буквы
Израиль Кусаев
К сожалению, мой был ниже
Константин
0

Или, если вы используете какое-то свойство из прототипа vuejs, которое не может быть прочитано при создании, вы также можете определить заголовки и написать, т.е.

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },
Dach0
источник
-4

Json должен быть отформатирован в двойные кавычки

Подобно:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

Не просто:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }
Dunks184
источник
Это верно для формата JSON, но при использовании javascript вы можете писать строки javascript, как хотите, и он все равно будет работать - потому что сериализатор JSON в axios не знает разницы! :-)
Джоно