//Почтальон//Приложение 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;
};
Да, я зарегистрировал это в консоли, и я получаю правильную информацию о заголовке: Content-Type: «application/json», x-authorization: «Bearer <token>». Та же конфигурация передается моим маршрутам удаления и получения API, и они работают нормально. Проблема связана с маршрутом post api.
Вы проверили конфигурацию CORS для сервера?
Если бы вы временно отключили аутентификацию. POST по-прежнему возвращает несанкционированную ошибку 401? Такое ощущение, что токен на предъявителя может быть отвлекающим маневром.
Грег, поэтому, когда я временно отключаю аутентификацию, она успешно работает. Странный. Что это может означать?
Пожалуйста, также отправьте код запроса GET
или DELETE
. Это поможет сравнить рабочий и нерабочий код. Может поможет быстрее разобраться в проблеме.
Сунил, я только что обновил свой пост и добавил запросы на удаление и получение API. Взгляни, пожалуйста. Спасибо
Если вы говорите, что это работает в Postman, то логично было бы включить и запрос-ответ от Postman. Чтобы вы/мы могли видеть разницу.
x00, добавил еще запрос-ответ от почтальона. Спасибо
@tim_woods, можете ли вы обновить скриншот, я вижу на нем токен Authorization
, и вы также можете поделиться своим внутренним кодом, используемым для публикации
Чандан, вы говорите о снимке экрана полезной нагрузки запроса, на котором показаны тип контента и токен?
Спасибо всем за ваши усилия. Ответ Daniel Sindrestean был правильным, и теперь проблема решена.
попробуй это:
//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-авторизация» или «Авторизация.
Вы можете зарегистрировать заголовки ответов и разместить их здесь?
Обновлен мой вопрос с изображением заголовков ответа. Взгляни, пожалуйста. Спасибо
как насчет заголовков запроса (скриншот)?
Извини за это. Обновил его снова с заголовками запроса.
в промежуточном программном обеспечении Accept Request вы сначала вызываете next(action), а затем ничего не возвращаете! обновите его, чтобы вернуть следующее (действие) в нижней части промежуточного программного обеспечения!
Пробовал это уже, но я получаю ту же ошибку.
Вы можете опубликовать журнал action.meta в action.type == POST_API_REQUEST промежуточного программного обеспечения API?
Action.meta возвращает правильную конфигурацию, тело, заголовок с токеном и т. д. Так что это очень запутанно. Не понимаю, почему я получаю ошибку 401
Благодарю вас за ваше усилие. Ответ Daniel Sindrestean был правильным, и проблема была решена.
Проблема в том, что вы неправильно используете метод post.
Как видно из изображения взятого из axios doc, при создании поста без указания имени параметра, то второй переданный параметр воспринимается как данные.
Так что пробуйте: axios.post(url, {}, config)
Попробуйте консольно зарегистрировать свою конфигурацию и проверить информацию заголовка, если все поля верны. Другая вещь, которую можно проверить, — это конфигурация CORS для сервера и разрешенные методы запроса, но, поскольку запрос POST работает через почтальона, проблема связана с самим запросом на отправку.