create-react-appでreact環境を作りました。
次にAPIを叩きたいのですが、今のreactサーバからやってもいいけど負荷が集中するからあまり現実的じゃない。
(→役割分担させる。webサーバは基本的にページを返す。APIサーバは基本的に裏でAPI叩いてデータのやり取りを行う。)
そこでreactサーバとネットの間にもう一つサーバ(Flask)をかますことにしました。
ただ、このまま使ってもCORSに引っかかってうまくAPIを叩くことができません。
CORS
セキュリティ的な問題でデフォルトで設定されている。
ブラウザから入力したものが意図しないリソースにアクセスされないように。
参考
https://qiita.com/geekduck/items/6f99a3da15dd39658fff#%E9%96%8B%E7%99%BA%E4%B8%AD%E3%81%ABapi%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E6%8A%95%E3%81%92%E3%81%9F%E3%81%84
create-react-appのプロキシ設定
それ用のmiddlewareがあるからそれを使えば簡単に設定できる。
窓口は一つのポート番号にして、そこから裏で動いている別サーバにアクセすることが可能
参考
https://qiita.com/geekduck/items/6f99a3da15dd39658fff
https://applingo.tokyo/article/1568
注意点
直接URLにFlaskのエンドポイントを入力しても画面は真っ白のまま、、、
一方で、コンポーネント内でaxiosを使ってgetするとうまくいく、、、
これは、create-react-appの仕様上の問題で、access headerがtext/htmlじゃないもののみプロキシに渡すようになっているらしい。
だから、直接URLに入力しても何も帰ってこないのか、納得。
詳しくは公式ドキュメントを参考にしてください。
https://create-react-app.dev/docs/proxying-api-requests-in-development/