web-dev-qa-db-ja.com

apollo-server-express CORSの問題

そのため、apollo-server-express 2.3.3に移行しています(私は1.3.6を使用していました)いくつかのガイドに従って、必要な調整を行いましたが、CORSの問題で立ち往生しています。

docs によると、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
        }
    }))
);

今、新しいバージョンでは、ドキュメントによってこれが単純な移行のように見えるイベントが、私はそれを機能させていないようです。私はさまざまな記事をチェックしましたが、誰も問題を抱えていないようです。

皆さんが私を助けてくれることを願っています。

乾杯!

5
José Del Valle

CORS設定は、ApolloServerではなくExpressJSから取得されます。カスタムまたはワイルドカードOriginを追加する場合は、コールバック/ハンドラー関数で処理する必要があります。

const server = new ApolloServer({
    ....,
    cors: {
        credentials: true,
        Origin: (Origin, callback) => {
            const whitelist = [
                "http://site1.com",
                "https://site2.com"
            ];

            if (whitelist.indexOf(Origin) !== -1) {
                callback(null, true)
            } else {
                callback(new Error("Not allowed by CORS"))
            }
        }
    }
});
1