Help us understand the problem. What is going on with this article?

ローカル開発環境でApollo ClientからMicroへ通信するときのCORS設定

More than 1 year has passed since last update.

はじめに

node.js によるGraphQLサーバーを実装している時にCORS関係のエラーで嵌ったので共有しておきます。
尚、CORSについては既にいろいろな方が解説されているので説明は省きます。

前提

  • サーバー側: Micro: v9.3.3
  • クライアント側: Apollo Client: v2.4.8
  • サーバー, クライアント共にローカル開発環境で動いている

症状

ローカル開発環境で、GraphQL Playground では動作確認できるのに Apollo Client から正しいGraphQLクエリを投げているのにも関わらず Error: "Network error: NetworkError when attempting to fetch resource." が出る。

原因 & 解決策

CORS の仕様で単純リクエストでないリクエストの時に発生する preflight request にサーバー側が対応できていなかったので対応できるようにする。

preflight request とは

この記事 などで詳しく解説されているので参考にしてください。要は CORS 時に発生することのある OPTION リクエストのことらしいです。 今回の場合は micro-cors によってレスポンスヘッダが適切に設定されているので 200 を返すだけで大丈夫です。

micro-cors を使用しています。

import { send } from 'micro'
import { get, post, router, options } from 'microrouter'
import { ApolloServer } from 'apollo-server-micro'
import { schema } from './schema'

const apolloServer = new ApolloServer({ schema })
const graphqlPath = '/graphql'
const graphqlHandler = apolloServer.createHandler({ path: graphqlPath })

module.exports = cors({
  allowMethods: ['GET', 'POST']
})(
  router(
    post(graphqlPath, graphqlHandler),
    get(graphqlPath, graphqlHandler),
    // to respond with a preflight request
    options(graphqlPath, (_, res) => send(res, 200)),
    (_, res) => send(res, 404, 'Not Found'),
  )
)

若干説明不足な感じもしますが問題解決の一助となれば幸いです。

参考

wakame_tech
全弱
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした