Вк network error typeerror failed to fetch
Я использую fetch API в своем приложении React. Приложение было развернуто на сервере и работало отлично. Я тестировал это несколько раз. Но внезапно приложение перестало работать, и я понятия не имею, почему. Проблема в том, что когда я отправляю get запрос, я получаю действительный ответ от сервера, но также fetch API улавливает исключение и показывает TypeError: Failed to fetch. Я даже не вносил никаких изменений в код, и это проблема со всеми компонентами React.
Но в то же время и получение этой ошибки:
fetch(url)
.then(res => res.json())
.then(data => {
// do something with data
})
.catch(rejected => {
console.log(rejected);
});
Когда я удаляю учетные данные: “включить”, это работает на localhost, но не на сервере.
Я перепробовал все решения, представленные в StackOverflow и GitHub, но у меня просто не получилось.
Ответ
Это может быть проблемой с ответом, который вы получаете от серверной части. Если на сервере все работало нормально, проблема могла быть в заголовках ответа.
Проверьте значение Access-Control-Allow-Origin в заголовках ответа. Обычно fetch API выдает ошибку выборки даже после получения ответа, когда заголовки ответа ‘ Access-Control-Allow-Origin и источник запроса не совпадают.
Почему возникает TypeError: Failed to fetch при запросе к серверу из VK Mini App только из приложения на Android?
На сервере запущен Express-сервер, у него разрешены кроссдоменные запросы, настроен сертификат, и у браузеров нет проблем с тем, чтобы получить оттуда статическую страницу, или сделать на него запрос к API, в том числе, если приложение запущено в браузере на сайте ВК (статика подгружается из ВК, поэтому запросы кроссдоменные).
const app = express();
app.use(cors({origin: “*”,}));
// …
t = https.createServer({key:pk,cert:sf},app);
t.listen(443,()=>{console.log(“start”)});
Более того, если открыть приложение в официальном клиенте на iOS, то запросы к серверу также проходят, и всё работает.
И только если приложение открыто в официальном клиенте на Android, запрос не просто не успешно завершается, а он даже, возможно, не начинается, выкидывая исключение TypeError: Failed to fetch.
Я добавил в приложение консоль Eruda, чтобы посмотреть на код запроса или заголовки, но даже их нет, в консоли (во вкладке работы с сетью) просто написано pending… и статус unknown.
При этом, точно такой же код при обращении к сторонним доступным извне API, типа курсов валют (используя GET, но GET также не работает в случае моего сервера), работает прямо из приложения:
const requestOptions = {
method: ‘POST’,
body: JSON.stringify(jsonData),
headers:{‘content-type’: ‘application/json’},
};
try
{
let zapros = await fetch(myURL, requestOptions);
// …
Проблема возникла точно не из-за кроссдоменности, так как изначально я хостил и API, и статику, но статику получилось выгрузить в ВК через их технологию Deploy, а до этого приложение не получало даже статики и вечно загружалось, в то время как браузеры на всех моих устройствах не видели проблем с тем, чтобы получить от моего сервера как статику, так и ответ на POST-запрос.
Нашёл решение:
Проблема оказалась в том, что был указан только сертификат и закрытый ключ, а корневой и промежуточный сертификаты не были указаны в настройках Express-сервера:
l
et pk = fs.readFileSync(“key.key”);
let sf = fs.readFileSync(“сert.crt”);
// Добавлено:
let root_c = fs.readFileSync(“root.crt”); // Корневой сертификат
let prom = fs.readFileSync(“prom.crt”); // Промежуточный сертификат
t = https.createServer({key:pk,cert:sf,ca:[root_c,prom]},app);
То есть, браузерам было достаточно и двух “частей” сертификата, а вот приложению – нет
