React и Redux: 401 Несанкционированная ошибка POST API Request

//Почтальон//Приложение React Для моего реагирующего приложения при отправке apiPostRequest() я получаю 401 несанкционированную ошибку, когда она попадает в промежуточное ПО запроса API POST, даже если пользователь аутентифицирован, а токен хранится в локальном хранилище. Смущает то, что мои API-запросы GET и DELETE работают нормально. Поэтому я не могу понять, почему тогда POST API возвращает 401 несанкционированную ошибку? В Почтальоне работает нормально. Любая помощь будет оценена.

//Accept request action

export const acceptRequest = (requestId) => ({
  type   : ACCEPT_REQUEST,
  payload: requestId
});

// Accept request middleware

export const acceptRequestFlow = ({dispatch, getState}) => next => action => {
  next(action);

    if (action.type === ACCEPT_REQUEST){
      const acceptRequestId = action.payload
      console.info(acceptRequestId)
      const URL = `/api/userConnections/acceptRequest/${action.payload}`;
      dispatch(apiPostRequest(URL, setAuthorizationHeader(getState), acceptRequestId, ACCEPT_REQUEST_SUCCESS, ACCEPT_REQUEST_ERROR));
    }
};
//API POST, DELETE, GET request actions

export const apiPostRequest = (url, config, body, onSuccess, onError) => ({
  type: POST_API_REQUEST,
  meta: {url, config, body, onSuccess, onError}
});
export const apiDeleteRequest = (url, config, id, onSuccess, onError) => ({
  type: DELETE_API_REQUEST,
  meta: {url, config, id, onSuccess, onError}
});
export const apiGetRequest = (url, config, onSuccess, onError) => ({
  type: GET_API_REQUEST,
  meta: {url, config, onSuccess, onError}
});
//API POST, DELETE, GET request middleware

export const api = ({dispatch}) => next => action => {

  if (action.type === POST_API_REQUEST) {
    const {url, config, body, onSuccess, onError} = action.meta;

    axios.post(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: body})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }

  if (action.type === GET_API_REQUEST) {
    const {url, config, onSuccess, onError } = action.meta;

    axios.get(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: data})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }

  if (action.type === DELETE_API_REQUEST) {

    const {url, config, id, onSuccess, onError } = action.meta;
    axios.delete(url, config)
      .then((data) => { dispatch({ type: onSuccess, payload: id })})
      .catch(error => dispatch({ type: onError, payload: error }))
  }


return next(action)
};
//Setting Auth Header

export const setAuthorizationHeader = (getState) =>{

    const token = getState().auth.token; 
    const config = {
      headers:{
        "Content-Type": "application/json"
      }
    }
  if (token){
    config.headers['Authorization'] = token;
  }
  return config;
};

Попробуйте консольно зарегистрировать свою конфигурацию и проверить информацию заголовка, если все поля верны. Другая вещь, которую можно проверить, — это конфигурация CORS для сервера и разрешенные методы запроса, но, поскольку запрос POST работает через почтальона, проблема связана с самим запросом на отправку.

gutsyDev 12.12.2020 18:45

Да, я зарегистрировал это в консоли, и я получаю правильную информацию о заголовке: Content-Type: «application/json», x-authorization: «Bearer <token>». Та же конфигурация передается моим маршрутам удаления и получения API, и они работают нормально. Проблема связана с маршрутом post api.

tim_woods 12.12.2020 18:58

Вы проверили конфигурацию CORS для сервера?

gutsyDev 12.12.2020 19:10

Если бы вы временно отключили аутентификацию. POST по-прежнему возвращает несанкционированную ошибку 401? Такое ощущение, что токен на предъявителя может быть отвлекающим маневром.

Greg 12.12.2020 19:15

Грег, поэтому, когда я временно отключаю аутентификацию, она успешно работает. Странный. Что это может означать?

tim_woods 12.12.2020 19:22

Пожалуйста, также отправьте код запроса GET или DELETE. Это поможет сравнить рабочий и нерабочий код. Может поможет быстрее разобраться в проблеме.

Sunil Chaudhary 13.12.2020 12:11

Сунил, я только что обновил свой пост и добавил запросы на удаление и получение API. Взгляни, пожалуйста. Спасибо

tim_woods 13.12.2020 15:12

Если вы говорите, что это работает в Postman, то логично было бы включить и запрос-ответ от Postman. Чтобы вы/мы могли видеть разницу.

x00 13.12.2020 19:20

x00, добавил еще запрос-ответ от почтальона. Спасибо

tim_woods 13.12.2020 19:34

@tim_woods, можете ли вы обновить скриншот, я вижу на нем токен Authorization, и вы также можете поделиться своим внутренним кодом, используемым для публикации

Chandan 14.12.2020 09:10

Чандан, вы говорите о снимке экрана полезной нагрузки запроса, на котором показаны тип контента и токен?

tim_woods 14.12.2020 15:26

Спасибо всем за ваши усилия. Ответ Daniel Sindrestean был правильным, и теперь проблема решена.

tim_woods 14.12.2020 21:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
12
1 425
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуй это:

//Setting Auth Header

export const setAuthorizationHeader = (getState) =>{

    const token = getState().auth.token; 
    const config = {
      headers:{
        "Content-Type": "application/json"
      }
    }
  if (token){
    // change 'x-authorization' to 'Authorization'
    config.headers['Authorization'] = token;
  }
  return config;
};

Спасибо за ваш ответ. Это не работает. Я не думаю, что имеет значение, назову ли я это «x-авторизация» или «Авторизация.

tim_woods 13.12.2020 18:49

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

cl3m3c7 13.12.2020 18:50

Обновлен мой вопрос с изображением заголовков ответа. Взгляни, пожалуйста. Спасибо

tim_woods 13.12.2020 18:59

как насчет заголовков запроса (скриншот)?

cl3m3c7 13.12.2020 19:07

Извини за это. Обновил его снова с заголовками запроса.

tim_woods 13.12.2020 19:10

в промежуточном программном обеспечении Accept Request вы сначала вызываете next(action), а затем ничего не возвращаете! обновите его, чтобы вернуть следующее (действие) в нижней части промежуточного программного обеспечения!

cl3m3c7 13.12.2020 19:48

Пробовал это уже, но я получаю ту же ошибку.

tim_woods 13.12.2020 19:59

Вы можете опубликовать журнал action.meta в action.type == POST_API_REQUEST промежуточного программного обеспечения API?

cl3m3c7 13.12.2020 20:24

Action.meta возвращает правильную конфигурацию, тело, заголовок с токеном и т. д. Так что это очень запутанно. Не понимаю, почему я получаю ошибку 401

tim_woods 13.12.2020 22:28

Благодарю вас за ваше усилие. Ответ Daniel Sindrestean был правильным, и проблема была решена.

tim_woods 14.12.2020 21:28
Ответ принят как подходящий

Проблема в том, что вы неправильно используете метод post.

Как видно из изображения взятого из axios doc, при создании поста без указания имени параметра, то второй переданный параметр воспринимается как данные.

Так что пробуйте: axios.post(url, {}, config)

Другие вопросы по теме