React, Fetch-API, no-cors, непрозрачный ответ, но все еще в памяти браузера
Я пытался создать сайт React, который получал бы GET-ответ от API и распечатывал его в моем .html-файле. Мне удалось получить файл в самый раз, но я не могу получить доступ к серверу данных JSON, который мне отправляет.
Если я использую no-cors в моем Fetch-запросе, я получаю непрозрачный ответ, почти ничего не содержащий, кроме если я перейду в инструменты разработчика, я могу найти там свои данные и прочитать их. Если я использую корс, почти то же самое. Я получаю ошибку 403, но мои данные находятся в памяти браузера, но мой код не распечатывает их. Я могу найти ответ от Сети в инструментах разработчика.
Почему сервер выдает ошибку, но данные все равно получаются? И как я могу получить к нему доступ, если он находится в браузере?
class Clock extends React.Component {
constructor(props) {
super(props)
this.state = {data2: []}
this.apihaku = this.apihaku.bind(this)
}
componentDidMount() {
this.apihaku(),
console.info("Hei")
}
apihaku () {
fetch('https://#######/mapi/profile/',
{method: 'GET', mode:'no-cors', credentials: 'include',
headers: {Accept: 'application/json'}}
).then((response) => {
console.info(response);
response.json().then((data) =>{
console.info(data);
});
});
}
render() {
return <div>
<button>Button</button>
</div>
}}
ReactDOM.render(
<Clock />,
document.getElementById('content')
)
Обновлено: изображения ошибок после проверки предложений
https://i.stack.imgur.com/wp693.png
Те же ошибки, он продолжает выдавать для этого предложения: "response.json (). Then (data => {console.info (" Heih2 ");" Сообщение об ошибке: Не перехвачено (в обещании) SyntaxError: Неожиданный конец ввода. Я все еще вижу данные в консоли.
https://#######/mapi/profile/, потому что вы упростили для нас определение того, о каком API вы на самом деле говорите здесь? «А как я могу получить к нему доступ, если он в браузере?» - исправляя все, что вы делаете неправильно, разговаривая с этим загадочным API, в первую очередь, чтобы он не отвечал кодом состояния, который сигнализирует браузеру, что «что-то пошло не так, отбросьте тело ответа».
Извините за это, но я не совсем уверен, какую информацию мне следует предоставить. Я не уверен, достаточно ли сообщений об ошибках с кодом или нет. API предназначен для рабочего проекта, поэтому я не могу раскрыть адрес. Непрозрачный ответ, который я получаю от сервера, идет с кодом 0, но когда я перехожу к источникам, есть ответ 200 OK, где находятся данные. Я добавлю несколько картинок для пояснения.
Начните с удаления mode:'no-cors'. Когда вы используете mode: 'no-cors', вы явно указываете, что хотите, чтобы браузер блокировал доступ вашего внешнего кода к любым данным в теле ответа или заголовках. Смотрите ответы на stackoverflow.com/questions/43317967/… и stackoverflow.com/questions/42254685/…
Я получил ответ, что использовать «no-cors» действительно невозможно. Админ дал мне среду разработки, и оттуда все работает нормально. Спасибо всем за помощь, особенно Фади.
Ответы 3
Попробуйте это и посмотрите, где происходит ошибка, я верю в синтаксический анализ, но давайте проверим и посмотрим
fetch(https://#######/mapi/profile/, {
method: "GET",
headers: {
"Content-Type": "application/json"
},
credentials: "include"
})
.then((response) => {
console.info(response);
try {
JSON.parse(response)
}
catch(err){
console.info("parsing err ",err)
}
})
.catch((err)=>{
console.info("err ",err)
});
Это все та же ошибка, значит ли это, что ответ пуст? Вот две фотографии. imgur.com/a/8lWUN и imgur.com/a/C2ynV
Можете ли вы сделать JSON.parse (response) вместо response.json () и записать его в консоль
Да, теперь он переходит к этому. Видимо это уже разобрано? parsing err SyntaxError: Неожиданный токен o в JSON в позиции 1 в JSON.parse (<anonymous>) в fetch.then.response (mainfile.js: 17) в <anonymous>
Итак, ваша проблема теперь решена, я обновил свой ответ, если кто-то еще сталкивается с тем же
На самом деле нет, он продолжает давать мне ту же (Неожиданный токен) ошибку. Я одновременно ищу в Google, и если я изменю его на JSON.stringify, я получу ответ. Это просто 0-ответ с кодом состояния и ответ 200 OK с моим JSON только на странице браузера, как на рисунке 2 в исходном сообщении.
Можете ли вы добавить получаемый ответ, похоже, сервер не отправляет правильный формат json
Вы тоже отвечаете за серверную часть? Можете ли вы попробовать api с помощью почтового менеджера, включая правильные заголовки и проверить ответ
Да, я только что попробовал, и с Postman все работает нормально. Заголовки и параметры такие же, и я получаю 200 ОК и все данные, которые мне нужны. Я пытался сначала выполнить эту работу самостоятельно в течение двух дней, и с Postman у меня нет проблем. Я не несу ответственности за бэкэнд. Я работаю техподдержкой и пытаюсь создать лучшие инструменты для более эффективной работы. Изображение: imgur.com/a/chPv3
Можете ли вы попробовать новое обновление, я удалил учетные данные из заголовков, поскольку я проверил пример в документации по выборке, также добавил тип контента и дайте мне знать, что происходит
Да, я изменил код, и он вернулся к непрозрачному ответу, который мы видели ранее на фотографиях. В Postman отсутствует один параметр, который не был виден на картинке для режим: без корса. Если я попробую код с включенным cors, я получаю 403 Forbidden, а в ответе указано Вам не разрешено просматривать это и т. д.. Итак, только без коров я получаю 200 ОК, как в Postman. Я не понимаю, почему Fetch и Postman работают так по-разному? Параметры такие же.
Вы получаете непрозрачный ответ, потому что вы используете выборку с режимом: 'no-cors'. Вам нужно использовать режим: 'cors', и сервер должен отправить необходимые заголовки CORS, чтобы получить доступ к ответу.
Fetch делает именно то, что говорится в документации, от Mozilla:
The fetch specification differs from jQuery.ajax() in two main ways:
The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set). Since Aug 25, 2017. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13.
Поэтому вам нужно использовать CORS, иначе вы получите непрозрачный ответ (без JSON), а затем 403 мне подсказывает, что вы не прошли аутентификацию должным образом. Протестируйте свой API с помощью Postman, если бы мне пришлось предположить, я бы сказал, что API не отправляет cookie, потому что это запрос GET, поэтому независимо от того, насколько хорошо вы настроили заголовки на клиенте, это не сработает. Попробуйте вместо этого как ПОЧТУ. Запросы GET действительно следует использовать только для удаления исходного HTML-кода в браузере. Я думаю, что для ваших заголовков используйте их, включите кредиты, которые отправляет API, и разрешите домену быть другим.
mode: "cors", // no-cors, cors, *same-origin *=default
credentials: "include", // *same-origin
вы можете поместить this.apihaku () в componentDidMount () и посмотреть