#reactjs #fetch-api #bearer-token
#reactjs #fetch-api #токен-носитель
Вопрос:
Я столкнулся с проблемой с fetch API при отправке токена-носителя в заголовке запроса. Проблема в том, что запрос завершается с ошибкой при наличии этого токена в заголовке, но все работает нормально, когда в заголовке нет токена, и запрос может извлекаться. Есть идеи о том, как решить эту проблему? Я действительно ценю любую помощь.
const url = "https://something.com"
const token = "something";
const options = {
headers: {
Accept: "application/json",
Authorization: "Bearer " token
}
};
fetch(url, options)
.then((res) => {
if (res.ok) {
return res.json();
} else {
throw Error("Error!");
}
})
.then((data) => {
...
})
.catch((error) => {
...
});
Ответ №1:
Попробуйте изменить часть принятия:
Редактировать: Access-Control-Allow-Origin — это заголовок CORS (совместное использование ресурсов разных источников).
Когда сайт A пытается извлечь содержимое с сайта B, сайт B может отправить заголовок ответа Access-Control-Allow-Origin, чтобы сообщить браузеру, что содержимое этой страницы доступно для определенных источников. (Источником является домен, а также схема и номер порта.) По умолчанию страницы сайта B недоступны для любого другого источника; использование заголовка Access-Control-Allow-Origin открывает дверь для перекрестного доступа к определенным источникам запроса.
Для каждого ресурса / страницы, которые сайт B хочет сделать доступными для сайта A, сайт B должен обслуживать свои страницы с заголовком ответа:
Access-Control-Allow-Origin: http://siteA.com
Нашел его в другом сообщении, тоже может помочь.
const options = {
headers: {
Content-Type: "application/json",
Authorization: `Bearer ${token}` //Change it too
}
};
Связанный с токеном, один из способов его передачи был бы таким:
const options = {
headers: {
//Something else...
Authorization: `Bearer ${yourToken}`
}
};