Reactと接続する

モックを本物に差し替える

React 実践でフリマの画面を作ったとき、商品一覧はモックの偽データを返していました。ここでその裏を、いま作った API に差し替えます。

// これまで  モックを見ていた
const response = await fetch("/api/items");

// これから  自分の API を見る
const response = await fetch("http://localhost:3000/items");

受け取る形は同じ JSON なので、画面側のコードはほとんど変わりません。同じ形を返す約束を守ってきたからです。

つなぐと最初に出る壁

差し替えると、たいていブラウザのコンソールにこう出ます。

Access to fetch has been blocked by CORS policy

これはブラウザの安全装置です。React は 5173 番、API は 3000 番と、別の場所で動いているため、既定では通信が止められます。

この仕組みが無いと、あなたが開いた悪意のあるページが、裏で別のサイトの API を勝手に叩けてしまいます。ですから止めること自体は正しい動きです。

許可を明示する

サーバー側で「この相手からは受け付ける」と表明します。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
  next();
});

これもミドルウェアです。第5章で学んだ形が、ここでも使えます。

* は使わない

res.setHeader("Access-Control-Allow-Origin", "*"); // 避けたい

* は「どこからでもよい」という意味です。動くので使われがちですが、fleama のようにトークンを扱う API では危険です。

許す相手は書き出す。 開発中は http://localhost:5173、公開したらそのアドレスに変えます。

先に確認の問い合わせが来る

PUT や DELETE、Authorization ヘッダーを付けたリクエストでは、ブラウザが本番の前に OPTIONS という確認の問い合わせを送ります。

これに答えないと、本番のリクエストは飛んできません。上のミドルウェアがヘッダーを返していれば、たいていはそのまま通ります。

手を動かす

演習では、CORS を許可するミドルウェアを書きます。許す相手を明示してください。

1. Access-Control-Allow-Origin に http://localhost:5173 を設定する(* は使わない)
2. Access-Control-Allow-Methods に GET,POST,PUT,DELETE を設定する
3. Access-Control-Allow-Headers に Content-Type,Authorization を設定し、next() を呼ぶ