Заголовок авторизации не работает в выборке - React Native
Я делаю запрос к API, который у меня есть на моем компьютере (192.168.1.132), и реагирую на собственный с моего телефона (в той же сети):
fetch('http://192.168.1.132:8000/test', {
method: 'GET',
headers: { 'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ'},
credentials: 'same-origin'
})
.then((response) => response.json())
.then((responseJson) => {
console.info('RESPONSE: ' + JSON.stringify(responseJson))
})
Но я обнюхиваю запрос, и у него нет заголовка авторизации (появится любой другой, который я поставил, но не авторизация). В Xcode я включил AllowArbitraryLoads. Итак, мой API возвращает 401 (Неавторизовано), потому что, очевидно, нет заголовка авторизации. Почему он не включен в мой запрос?
Выглядит правильно, должно работать. Я лично никогда не использовал свойство credentials.
Попробуйте вместо этого использовать credentials: 'include'. Если ваш интерфейсный JavaScript также не запускается из исходного http://192.168.1.132:8000, ваш код выполняет запрос из другого источника. Но с credentials: 'same-origin' вы указали браузеру, что он должен включать учетные данные только в запросы одного и того же происхождения, а не кросс-происхождения. Заголовок авторизации (для HTTP-аутентификации) представляет собой тип учетных данных fetch.spec.whatwg.org/#credentials, поэтому браузер пропускает его, если (с помощью credentials: 'include') вы явно не укажете, что всегда хотите включать учетные данные - даже для запросов из разных источников.
Кстати, вам нужно убедиться, что конечная точка http://192.168.1.132:8000/test разрешает неаутентифицированные запросы OPTIONS, то есть без заголовка авторизации. Поскольку включение заголовка авторизации заставляет ваш браузер автоматически сначала отправлять предварительный запрос OPTIONS CORS developer.mozilla.org/en-US/docs/Web/HTTP/…, но браузер всегда пропускает все учетные данные из этого запроса OPTIONS. Поэтому, если для этой конечной точки http://192.168.1.132:8000/test также требуется заголовок авторизации в запросах OPTIONS, предварительная проверка не удастся.
И для ясности: только потому, что ваш интерфейсный JavaScript-код также работает на сервере 192.168.1.132, запрос не отправляется с одинаковым происхождением. Он будет таким же, только если номер порта сервера для вашего кода внешнего интерфейса совпадает с номером порта сервера, на который вы отправляете запрос. Поэтому, если ваш интерфейсный код также не запускается с сервера на порту 8000, то запрос, который делает ваш код, является запросом с перекрестным происхождением.
Ответы 2
Для прикрепления заголовков вам понадобится косая черта в конце URL-адреса. Как указано в комментариях, сделайте так, чтобы в учетных данных говорилось «включить». Если ваш API прикрепляет токен CSRF во время предполетной подготовки, он также будет включать этот файл cookie.
Завершающая косая черта была всем, что мне было нужно! Это безумие! Я потратил более двух часов, пытаясь понять это. Спасибо!!!!
Зачем нужна завершающая косая черта? Есть ли ресурс, чтобы узнать об этом больше?
Я люблю тебя, я провел дни, недели, я не помню, как пытался это исправить ...
Я могу засвидетельствовать силу этого удара. Оно работает! Обратите внимание: я видел эту проблему только в React Native iOS. Андроид работал без косой черты.
Сначала я просто использовал в своем Node Express API следующее:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authentication");
next();
});
Он не работал нормально с реагировать приложение, но работал с прямым запросом Insomnia, тогда мне нужно было добавить следующее:
const cors = require('cors');
app.options('*', cors())
Попробуй это использование заголовка авторизации с выборкой в React Native