以前書いたFirebase FunctionsでGraphQLを使う、その後困ったことです。
まとめ
NuxtのApolloClientからFunctionsのGraphQL呼ぶとCORSでエラーになりました。
createHandler
の引数にcorsオプションを渡してやるとスッキリします。
// 略
const server = new ApolloServer({ typeDefs, resolvers });
exports.graphql = functions.https.onRequest(server.createHandler({
cors: {
origin: 'http://localhost:3000', // 許可するオリジン
credentials: true
}
}));
補足
CORSとは https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
オリジンって https://developer.mozilla.org/ja/docs/Glossary/Origin
僕はlocalhost:3000のnuxtからlocalhost:5001のfunctionsに投げてたので一生怒られてました。
動作確認ができないので詰みです。
サーバからレスポンス返すときのヘッダにAccess-Control-Allow-Origin
を入れてやればOKです。
今回のApolloServerではこの辺で設定してる感じです。配列にすれば複数許可できるんですね。