Запрещенный запрос при запросе POST от Axios

Я получил запрещенный запрос при отправке POST-запроса с помощью axios.

Вот моя функция axios:

const headers = {
    'Authorization': `bearer ${JSON.parse(localStorage.getItem('TOKEN'))}`,
    'Content-Type': 'application/json'
}

const getByRelationCode = (data) => {
    const response = Client.post(`${TRACKING_API}/getByRelationCode`, data, {
        headers
    })

    return response
}

И это вызывающая функция

const getDocument = (relationCode) => {
    await Service.getByRelationCode({ relationCode })
        .then((res) => {console.log(res))
        .catch(err => console.log(err))
}

Когда я попал в конечную точку с помощью почтальона, конечная точка вернула ответ. Но когда я вызываю его с помощью Axios, он возвращает запрещенный запрос. Что-то отсутствует в моем коде?

Возможно для проблемы CORS (developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Пожалуйста, предоставьте сообщение об ошибке, чтобы лучше ответить на ваш вопрос.

Tony Yip 17.05.2022 05:50

@Браво, может быть, он хотел использовать JSON.stringify(), а не JSON.parse()

Normal 17.05.2022 06:13

@Bravo, да, его следует полностью удалить (конечно, в зависимости от значения, хранящегося в локальном хранилище)

Normal 17.05.2022 06:18

@Normal Как вы думаете, мне следует изменить JSON.parse () на JSON.stringify ()?

Muhamad Iqbal 17.05.2022 06:38

Элементы в localStorage являются строками. Токены на предъявителя также являются строками. Вам не нужно ничего разбирать или сопоставлять... Authorization: `Bearer ${localStorage.getItem("TOKEN")`. То есть, если значение TOKEN не является строкой JSON. Пожалуйста, уточните, какое значение находится в локальном хранилище

Phil 17.05.2022 07:03
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
5
44
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

попробуй так

const config = {
    headers: { 
        'Authorization': `bearer ${localStorage.getItem('TOKEN')}`,
        'Content-Type': 'application/json' }
    }; 

const getByRelationCode = (data) => {
    const response = Client.post(`${TRACKING_API}/getByRelationCode`, data, config)
    return response;
}

"попробуй вот так"... почему? объясните, что, по вашему мнению, он делает неправильно

Bravo 17.05.2022 06:18

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

Попробуйте с правильным написанием Bearer.

const headers = {
    'Authorization': `Bearer ${JSON.parse(localStorage.getItem('TOKEN'))}`,
    'Content-Type': 'application/json'
}
Ответ принят как подходящий

У вас в заголовке написано промах.

const headers = {
    'Authorization': `Bearer ${JSON.parse(localStorage.getItem('TOKEN'))}`,
    'Content-Type': 'application/json'
}

Но в некоторых рамках мы можем настроить его. Если вы настроили его для себя, вы можете назвать его bearer. Хотя так называть это неправильно.

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