expressはじめに自分はReactやReduxを使ってWebアプリを開発するときにWebpackのdevServerにお世話になる。devServerを使えば、ソース変更時に自動でブラウザをリロードしてくれて便利だからである。devServerを使った場合、localhostで動かしてるwebサーバと通信できない。devServerは、http://localhost:8080で起動する。そこから、http://localhost:8000で動作するwebサーバとHTTP通信することは異なるオリジンにアクセスすることになってしまい通信は失敗する。localhost:8080とlocalhost:8000は、異なるオリジンなので前者から後者に対して通信することは普通できないのである。ローカルでwebサーバを動かす一方でフロント開発でdevServerを使ってるとき、フロントがサーバからデータ取得できるようにするにはどうすればよいのだろうかと壁にぶつかった。異なるオリジンであっても通信できるようにするにはどうすればよいのだろうかということである。今回は、異なるオリジンであってもサーバと通信できる設定について備忘録を残そうと思う。expressで簡単なwebサーバの準備nodejsのexpressを使用する。expressでのwebサーバ構築方法は、割愛させていただきます。expressでexpressをインストール次のapp.jsを用意する。start)でサーバを起動させる。すると、http://localhost:8000にアクセスしたときにres.json()の引数に指定したjsonを受け取ることができる。これでまずサーバサイドの実装は終了。先程のjsonが画面に表示される。fetchメソッドも使って取得できることも確認しよう。console画面に次を入力して取得できることを確認する。})fetchの第一引数は、http://localhost:8000になる。"/"は、https://www.google.co.jpを意味するからだ。その結果は次のとおりである。ドメインが異なるため通信失敗する。エラー内容にある通り、HTTPリクエストのヘッダーに'Access-Control-Allow-Origin'が存在しないからダメだよと言われるている。異なるオリジンからの通信も許可するために、サーバサイドに変更を加える。GETからOPTIONSまでのHTTPメソッドを使って通信すること許可ということになる。これでもういちど、fetchメソッドを実行すると取得できるようになる(やったね)。SessionありCORS(おまけ)session情報をもたせるときは、もう少し改良が必要になる。sessionを使うときはこれを追加してあげるこれでsessionありの通信も可能となるが、最後にフロントでのfetchメソッドも確認しておく。})(3)のとおり、credentailをfetchメソッドのオプションに追加する。最後にこれでサーバと通信できるフロント開発ができるように助けになってくれれば幸いである。非常に駆け足で説明してきたので、かなり読みにくい文章になってしまった。申し訳ない(あとでもう少し読みやすくしようと思います。