React SPA docker 上の API にアクセスで CORS が出た!! にハマる

Docker で構築したバックエンド (localhost:3000)に Docker に積んでいない create-react-app (localhost:8080) で作成した React アプリからアクセスしようとしたら次のようなエラーにってしまいました。

Access to XMLHttpRequest at 'http://localhost:3000/api' from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS (Access-Control-Allow-Origin) です。 localhost で同じだから大丈夫なのかな〜と思っていたら same origin にはプロトコルとポート番号も含むようです。

• Domain … localhost => domain
• Origin … https://localhost:3000 => protocol + domain + port

React からは proxy を通して API にアクセスするようにする

サーバーサイドの CORS の設定方法など色々と出てきたのですが、開発環境で localhost のポート番号が異なるために発生する CORS の問題は React 側で Same Origin になるように proxy を通せば良いみたいです。 (proxy を理解しているわけではないので言い方間違ってるかもですが)

構成

• API … http://localhost:3000
• Front (React) … http://localhost:8080

package.json に proxy を設定する

package.json

"proxy": "http://localhost:3000"

create-react-app, react-scripts で作成した React アプリは package.json に proxy の設定があると text/html 以外のヘッダの時のリクエスト全てを dev-server が proxy で指定されされているアドレスを origin としてリクエストするようになるようです。

1. React アプリからは http://localhost:8080/api にリクエストを投げる
2. dev-server が http://localhost:3000/api として実際のリクエストを飛ばす
3. http://localhost:3000 という Same Origin なので CORS が発生しない

となるﾄﾉｺﾄ。₍ᐢ •̥ ̫ •̥ ᐢ₎‪ ﾅﾙﾎﾄﾞﾈ. 完全理解した。

複数の API にアクセスする必要がある場合は http-proxy-middleware を使えば API 毎に proxy を返ることもできるようです

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy("/api/auth", { target: "http://localhost:8080/" }));
  app.use(proxy("/api/users", { target: "http://localhost:8081/" }));
};

cf. 開発中にAPIサーバにリクエストを投げたい - 知っていると捗るcreate-react-appの設定

React から API へのアクセスは自身にアクセスするようにする

axios.post('/api/post', data, headers{ 'Content-Type': 'application/json' });

のようにすれば OK。
これで CROS が発生すること無く開発環境の React から Docker 上の API にリクエストが投げれるようになりました ✌️₍ ᐢ. ̫ .ᐢ ₎✌️ ﾔｯﾀﾈ!!

本番環境で API のパスが変わるなら .env に REACT_APP_API="http://localhost:8080" みたいな設定して使うのが良さそうな気がしました。
この辺知見無いので実務ではどうしてるのか知りたいところです。

私の熱い周回遅れのSAP開発、始まります！ﾌﾌｯﾋ

---

[参考]

• オリジン間リソース共有 (CORS) - HTTP | MDN
• なんとなく CORS がわかる...はもう終わりにする。 - Qiita
• express.jsのcors対応 - Qiita
• axios で CORS によるクロスドメイン通信するとき - Qiita
• 知っていると捗るcreate-react-appの設定 - Qiita
• GitHub - chimurai/http-proxy-middleware: The one-liner node.js http-proxy middleware for connect, express and browser-sync

プリパラ&アイドルタイムプリパラコンプリートアルバムBOX