Ошибка запроса клиента Apollo: «Ошибка сети: не удалось получить» Как устранить неполадки?
Сервер Apollo настроен и правильно отвечает на запрос при использовании graphiql.
Существующее приложение response-redux с рендерингом на стороне сервера должно начать использовать graphql и сделать этот запрос.
Компонент этого приложения был настроен для выполнения того же запроса, похоже, он выполняет сетевой запрос, но он не работает с
Error: {"graphQLErrors":[],"networkError":{},"message":"Network error: Failed to fetch"}
Есть какие-нибудь советы по поиску и устранению неисправностей?
Ответы 4
Я запускал клиент apollo на локальном хосте и сервер apollo на someDomain.com, поэтому это была проблема CORS. После загрузки страницы, которая выполняет запрос в режиме chrome incognito и обновления, эта ошибка была обнаружена в консоли инструментов chrome dev:
httpLink.js:71 OPTIONS https://someDomain.com/graphql 405 (Method Not Allowed)
(anonymous) @ httpLink.js:71
...
(index):1 Failed to load https://someDomain.com/graphql: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8443' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Быстрое исправление для этой (только тестовой) настройки заключалось в установке cors на сервере экспресс apollo, как предлагает этот пост. https://blog.graph.cool/enpting-cors-for-express-graphql-apollo-server-1ef999bfb38d
Это действительно проблема корса. Пытался исправить с помощью экспресс. Но с Apollo GraphQL это не сработало.
const corsOptions = {
origin: "http://localhost:3000",
credentials: true
};
app.use(cors(corsOptions));
Итак, я попытался настроить cors внутри сервера GraphQL, и он сработал.
Для сервера Apollo
const corsOptions = {
origin: "http://localhost:3000",
credentials: true
};
const server = new ApolloServer({
typeDefs,
resolvers,
cors: corsOptions
});
server.listen().then(({ url }) => {
console.info(`? Server ready at ${url}`);
});
Для GraphQL Yoga
const options = {
cors: corsOptions
};
server.start(options, () =>
console.info("Server is running on http://localhost:4000")
);
У вас также может быть эта ошибка, если вы передадите ЗАГОЛОВКУ null в своем запросе через Apollo, например:
const middlewareLink = setContext(() => ({
headers: {
'authorization': `Bearer ${FeedierExchanger.token}` || null
}
}));
Измените его на:
const middlewareLink = setContext(() => ({
headers: {
'authorization': `Bearer ${FeedierExchanger.token}` || ''
}
}));
Или удалите эту часть:
|| ''
Если у вас есть правильный бэкэнд-валидация.
Все, что вам нужно сделать, чтобы выполнить следующую работу, - это включить библиотеку cors для вашего сервера Apollo-Graphql.
yarn add cors / npm install cors
Теперь вам нужно app.js или server.js (в основном входной файл вашего сервера)
добавьте к нему следующие строки
const cors = require('cors');
app.use(cors()); // Make sure you have express initialised before this.
Типичными проблемами для
Network errorявляются сбой разрешения DNS, закрытие соединения из-за отсутствия ответа.