@hillrider

Как решить проблему с блокировкой CORS?

Изучаю react/node по курсу udemy. Локально все работает нормально, но после деплоя при попытке Login with Google, консоль выдает ошибку:

Failed to load resource: the server responded with a status of 503 (Service Unavailable)

Access to fetch at 'https://geostickers.herokuapp.com/graphql' from origin 'https://geoapp-pvfinzglt.now.sh' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error logging in TypeError: Failed to fetch

Ошибку можно сгенерировать на клиенте https://geoapp-pvfinzglt.now.sh

Код сервера:
const server = new ApolloServer({
    typeDefs,
    resolvers,
    //cors: true, - не решает проблему
    context: async ({ req }) => {
        let authToken = null;
        let currentUser = null;
        try {
            authToken = req.headers.authorization
            if(authToken) {
                currentUser = await findOrCreateUser(authToken);
            }
        } catch(err) {
            console.error(`Unable to authenticate user with token ${authToken}`)
        }
        return { currentUser }
    }
});

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
    console.log(`Server listening on ${url}`)
});
  • Вопрос задан
  • 31462 просмотра
Решения вопроса 1
https://github.com/apollographql/apollo-server/iss...
В данном обсуждении достаточно различных решений вашего вопроса
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Domovikx
Я нашел три варианта решения, но опишу два решения для серверной части.
1. можно в респонс добавить заголовок - header
(request: Request, response: Response): void => {
      response.status(200)
      response.header({
        'Access-Control-Allow-Origin': '*',
      });
}

но лучше использовать второй вариант

2. более правильный, установить и использовать на сервере -
npm i cors
https://www.npmjs.com/package/cors
добавляем код:
import cors from 'cors';
const server = express();
server.use(cors());

проверяем запрос, должно всё работать
Ответ написан
xakplant
@xakplant
Автор сайта xakplant.ru
Есть статья "Fetch и CORS. Пример на ReactJS"

Вам кажется не хватает заголовков в ОТВЕТЕ
Access-Control-Allow-Origin: https://foo.invalid // Домен с которого идут запросы
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "заголовки которые можно отправить на удалённый сервер" 
// Разрешённые методы
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы