Reactと接続する
モックを本物に差し替える
React 実践でフリマの画面を作ったとき、商品一覧はモックの偽データを返していました。ここでその裏を、いま作った API に差し替えます。
JavaScript
// これまで モックを見ていた
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 を勝手に叩けてしまいます。ですから止めること自体は正しい動きです。
許可を明示する
サーバー側で「この相手からは受け付ける」と表明します。
JavaScript
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章で学んだ形が、ここでも使えます。
* は使わない
JavaScript
res.setHeader("Access-Control-Allow-Origin", "*"); // 避けたい* は「どこからでもよい」という意味です。動くので使われがちですが、fleama のようにトークンを扱う API では危険です。
許す相手は書き出す。 開発中は http://localhost:5173、公開したらそのアドレスに変えます。
先に確認の問い合わせが来る
PUT や DELETE、Authorization ヘッダーを付けたリクエストでは、ブラウザが本番の前に OPTIONS という確認の問い合わせを送ります。
これに答えないと、本番のリクエストは飛んできません。上のミドルウェアがヘッダーを返していれば、たいていはそのまま通ります。
手を動かす
演習では、CORS を許可するミドルウェアを書きます。許す相手を明示してください。
要件
Access-Control-Allow-Originにhttp://localhost:5173を設定する(*は使わない)Access-Control-Allow-MethodsにGET,POST,PUT,DELETEを設定するAccess-Control-Allow-HeadersにContent-Type,Authorizationを設定し、next()を呼ぶ
入出力例
request("GET", "/cors-check") → "200 {"origin":"http://localhost:5173","methods":"GET,POST,PUT,DELETE","headers":"Content-Type,Authorization"}"
request("GET", "/items") → "200 [{"id":1,"name":"レザースニーカー"}]"ヒント
編集 ゆめさく編集部