フロントエンドとバックエンドを同時に開発している際の CORS 問題を解消する

はじめに

研究で使用するプロトタイプを React.js と NestJS を使用して開発していた際、CORS が発生して大変だったので共有しておきます。

結論

"proxy": "設定したい URL" を package.json にプロキシ設定を記述すると解決できます。

例

package.json

{
  ... ,
  "proxy": "http://localhost:4000"
}

と記述すると fetch などでリクエストを投げる際に http://localhost:4000/api/v1/ の代わりに /api/v1/ で実行が可能になります。

まとめ

CORS で悩まされて、毎回ものすごく困っていたので機能を見つけたとき感動しました。
初歩的な問題で知っている方も多いと思いますが、少しでも参考になればと思います。

参考文献

• Proxying API Requests in Development - https://create-react-app.dev/docs/proxying-api-requests-in-development/
• ReactでAPIリクエストをプロキシする / Proxy API request with React - https://medium.com/@dorayakikun/react%E3%81%A7api%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E3%82%92%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%81%99%E3%82%8B-proxy-api-reference-with-react-d5108c181e28