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

Question

[hillrider]

Изучаю 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}`)
});

Comments

[hillrider]

Решение https://stackoverflow.com/questions/42159175/conne...

Answer 1

[Анатолий Чернышев]

https://github.com/apollographql/apollo-server/iss...
В данном обсуждении достаточно различных решений вашего вопроса

Comments

[hillrider]

нагуглил тоже этот топик, пробовал ставить cors: true/false, или задавать свои параметры, не сработало.... очень вероятно что я не все правильно понимаю, из предложенных советов
"apollo-server": "^2.3.1" без express

[Анатолий Чернышев]

hillrider, Возможно в этом основная и проблема. У вас строго по тз не используется express?

[Анатолий Чернышев]

hillrider, Конкретно вот эта выдержка вам не помогла https://github.com/apollographql/apollo-server/iss...

[hillrider]

ТЗ нет, это учебный проект, попробую переделать с express

[Анатолий Чернышев]

hillrider, с express все довольно просто решается, просто берете пакет cors, дальше включаете его как промежуточное оборудование app.use(cors({тут параметры})) и все

[hillrider]

что-то никак не получается, не понятно где(server/app.use()/middleware?) и какие именно настройки cors нужно указать(или просто cors: true), пробовал по разному, последний вариант -

const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./typeDefs');
const resolvers = require('./resolvers');
const { findOrCreateUser } = require('./controllers/userController')
const mongoose = require('mongoose');
require('dotenv').config();

mongoose
    .connect(process.env.MONGO_URI, { useNewUrlParser: true })
    .then(() => console.log('DB Connected'))
    .catch(err => console.error(err));    

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 }
    }
});

const app = express();

server.applyMiddleware({ 
    app, 
    cors: {
        credentials: true,
        origin: "*", 
    }
});

app.listen({ 
    port: process.env.PORT || 4000,
}).then(({ url }) => {
    console.log(`Server listening on ${url}`)
});

[Анатолий Чернышев]

Мое предположение.
npm install cors
в самом файле

const cors = require('cors')
//после объявления app
app.use(cors())

[Анатолий Чернышев]

А по поводу авторизации. Ее можно запихнуть в стандартную middleware от express, вцелом даже не надо использовать ApolloServer

app.use((req, res, next) => {
  let authToken
  try {
    authToken = req.headers.authorization
    req.current_user = await findOrCreateUser(authToken);
  } catch(err) {
    console.error(`Unable to authenticate user with token ${authToken}`)
  }
})

[hillrider]

оказывается -

you will get that error message if you haven't whitelisted the server IP addresses in MongoDB Atlas. The only way I see to do this in combination with Heroku dynos is to add 0.0.0.0/0 (i.e. all addresses) to your MongoDB Atlas whitelist.

Answer 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());

проверяем запрос, должно всё работать

Comments

[Ruslan04071996]

Спасибо за ответ , а можешь поподробнее объяснить 2 ю строчку в твоем коде?

Answer 3

[Борис Черепанов]

Есть статья "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