apollo-server-express CORS проблема

Question

Итак, я перехожу на apollo-server-express 2.3.3 (я использовал 1.3.6). Я следовал нескольким инструкциям, вносил необходимые изменения, но застрял в проблеме CORS.

В соответствии с документами вы должны использовать функцию applyMiddleware для подключения сервера apollo к express.

В настоящее время я делаю следующее:

const app = express();

// CORS configuration

const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true
}

app.use(cors(corsOptions))

// Setup JWT authentication middleware

app.use(async (req, res, next) => {
    const token = req.headers['authorization'];
    if(token !== "null"){
        try {
            const currentUser = await jwt.verify(token, process.env.SECRET)
            req.currentUser = currentUser
        } catch(e) {
            console.error(e);
        }
    }
    next();
});

const server = new ApolloServer({ 
    typeDefs, 
    resolvers, 
    context: ({ req }) => ({ Property, User, currentUser: req.currentUser })
});

server.applyMiddleware({ app });


const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
})

По какой-то причине мое промежуточное промежуточное ПО, кажется, не выполняется, когда я пытаюсь выполнить запрос от localhost: 3000 (клиентское приложение) Я получаю типичную ошибку CORS

С apollo-server-express 1.3.6 я без проблем делал следующее:

app.use(
    '/graphql',
    graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
    bodyParser.json(),
    graphqlExpress(({ currentUser }) => ({
        schema,
        context: {
            // Pass Mongoose models
            Property,
            User,
            currentUser
        }
    }))
);

Теперь с новой версией событие tho docsчтобы это выглядело как простая миграция, мне кажется, это не сработало.Я проверил различные статьи, и, похоже, ни у кого не возникло проблемы.

Надеюсь, вы, ребята, можете мне помочь.

Ура!

Answer 1

В Apollo Server 2.x вы предоставляете поле cors в конструкторе ApolloServer.

Так что в вашем случае это должно выглядеть следующим образом:

const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true
}

// Setup JWT authentication middleware

app.use(async (req, res, next) => {
    const token = req.headers['authorization'];
    if(token !== "null"){
        try {
            const currentUser = await jwt.verify(token, process.env.SECRET)
            req.currentUser = currentUser
        } catch(e) {
            console.error(e);
        }
    }
    next();
});

const server = new ApolloServer({ 
    typeDefs, 
    cors: cors(corsOptions),
    resolvers, 
    context: ({ req }) => ({ Property, User, currentUser: req.currentUser })
});

server.applyMiddleware({ app });


const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
})

Здесь вы найдете все параметры, принятые сервером apollo: https://www.apollographql.com/docs/apollo-server/api/apollo-server.html#Parameters-2

Здесь вы найдете соответствующее обсуждение: https://github.com/apollographql/apollo-server/issues/1142

Answer 2

Из моего понимания API промежуточного программного обеспечения Apollo Server параметры CORS, параметры анализатора тела и конечная точка graphql рассматриваются как специальные объекты, которые должны передаваться непосредственно в объект параметра applyMiddleware.

Итак, вы хотите попробовать следующую конфигурацию:

const app = express();

// CORS configuration

const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true
}
// not needed, CORS middleware is applied
// using the Apollo Server's middleware API
// app.use(cors(corsOptions))

// Setup JWT authentication middleware

app.use(async (req, res, next) => {
    const token = req.headers['authorization'];
    if(token !== "null"){
        try {
            const currentUser = await jwt.verify(token, process.env.SECRET)
            req.currentUser = currentUser
        } catch(e) {
            console.error(e);
        }
    }
    next();
});

const server = new ApolloServer({ 
    typeDefs, 
    resolvers, 
    context: ({ req }) => ({ Property, User, currentUser: req.currentUser })
});

// no need to explicitly define 'path' option in object
// as '/graphql' is the default endpoint
server.applyMiddleware({ app, cors: corsOptions });


const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
})