先生と生徒の会話形式で理解しよう

生徒

「ReactでAPIにアクセスしようとしたら、なんか“CORSエラー”って出ました。何が起こったんですか？」

先生

「それは『クロスオリジンリクエスト』が原因でブロックされているというエラーです。セキュリティに関する制限ですね。」

生徒

「クロスオリジンってなんですか？どうやって直せばいいんですか？」

先生

「それじゃあ今回は、ReactのFetch APIでCORSエラーが出たときの原因と解決方法を一緒に学んでみましょう！」

1. CORSエラーとは何か？

CORSとは「Cross-Origin Resource Sharing（クロスオリジンリソースシェアリング）」の略です。簡単に言えば、「別の場所にあるデータにアクセスするときのルール」のことです。

たとえば、Reactアプリが http://localhost:3000 で動いていて、APIが https://api.example.com にある場合、これらは「別のオリジン」と見なされます。

セキュリティのため、ブラウザは違うオリジンへの通信を制限しています。そのため、適切な設定をしていないと「CORSエラー」が発生してしまうのです。

2. ReactでFetch APIを使うとCORSエラーが出るケース

Reactで外部のAPIにデータを取りに行くとき、以下のようなコードを書くことがあります。


fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data));

このとき、API側が「CORSを許可」していないと、ブラウザが「ダメです！」とエラーを返します。

（画面に何も表示されず、開発者ツールに「CORS policyによってブロックされました」と出ます）

3. なぜブラウザはCORSを制限するの？

インターネット上では、悪意のあるサイトが他のサイトのデータを盗もうとすることがあります。たとえば、勝手にログイン済みの情報を使って、別のサーバーにアクセスするような攻撃です。

こうした攻撃からユーザーを守るために、ブラウザには「CORSの制限」というセキュリティ機能が備わっているのです。

4. CORSエラーを解決するにはどうすればいい？

このエラーをReact側で完全に解決するのは難しく、基本的にはAPIの「サーバー側」を設定変更する必要があります。

ただし、開発中であれば「プロキシ（proxy）」という仕組みを使って回避することができます。

5. Reactでプロキシを使ってCORSを回避する

Reactでは、package.json に以下のようにプロキシ設定を追加することで、CORSエラーを回避できます。


"proxy": "https://api.example.com"

この設定をすると、ReactがAPIにアクセスするときに「まるで同じサーバーにアクセスしているかのように」見せかけることができます。

結果的に、ブラウザはCORSの制限をかけず、データの取得ができるようになります。

6. プロキシを使ったサンプルコード


import React, { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/data")
      .then((res) => res.json())
      .then((result) => setData(result.message))
      .catch((error) => {
        console.error("エラー:", error);
        setData("データ取得失敗");
      });
  }, []);

  return (
    <div>
      <h1>APIからのメッセージ: {data}</h1>
    </div>
  );
}

export default App;

（画面に「APIからのメッセージ: ◯◯」と表示され、CORSエラーなく取得できます）

7. サーバー側にAccess-Control-Allow-Originを設定する

本番環境では、プロキシではなくAPIサーバー側で「CORSを許可する設定」が必要です。

たとえば、Node.jsを使っている場合は次のような記述を追加します。


const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors()); // これで全オリジンからのアクセスを許可

このように、CORSを許可すれば、ReactからのFetchリクエストも正しく通るようになります。

8. それでもCORSエラーが出るときのチェックポイント

APIのURLが正しいか確認
httpとhttpsが混在していないか
ブラウザがキャッシュしていないか（シークレットモードで確認）
認証トークンが必要なAPIなのに、未設定で送っていないか

これらのポイントも確認すると、原因が見つかりやすくなります。

まとめ

ReactでAPIへアクセスするときに発生するCORSエラーは、初心者が最初につまずきやすい重要なポイントです。特に、外部サイトや別のオリジンに存在するデータへFetch APIでアクセスする場面は多く、正しい理解があるかどうかで開発のスムーズさが大きく変わります。今回の記事では、クロスオリジンの基本的な考え方、ブラウザが持つセキュリティ機能のしくみ、CORSエラーがなぜ発生するのかといった基礎から、Reactでの具体的な回避方法までを順を追って学びました。なかでも、開発環境で便利に使えるプロキシ設定は、Reactの実践的な学習において非常に役立つ知識です。package.jsonにプロキシを記述するだけでCORSエラーを回避できる点は、開発の効率を大きく向上させます。また、本番環境では必ずサーバー側にCORS設定を実装する必要があり、Access-Control-Allow-Originの理解が不可欠です。さらに、ReactでAPI通信を行う際には、プロキシの設定だけでなく、データの取得処理、例外処理、エラー表示の制御なども重要です。Fetch APIでデータ取得に失敗した際のログ出力やメッセージの制御は、画面の信頼性につながり、ユーザーにとって安心できる動作を実現します。こうした細かなポイントも、Reactアプリが実用的な機能を持つためには欠かせないステップです。以下では、記事内容を踏まえたサンプルコードとして、プロキシ設定を使ったReactコンポーネントの例をまとめています。実際に使えるサンプルなので、学習の中でそのまま参考にしてください。

サンプルプログラム：プロキシでAPI通信を行うReactコンポーネント例


import React, { useEffect, useState } from "react";

function FetchBox() {
  const [message, setMessage] = useState("読み込み中…");

  useEffect(() => {
    fetch("/info")
      .then((response) => response.json())
      .then((result) => setMessage(result.text))
      .catch(() => setMessage("取得に失敗しました"));
  }, []);

  return (
    <div className="card p-3 mb-3">
      <h2 className="fw-bold fs-4">APIメッセージ</h2>
      <p>{message}</p>
    </div>
  );
}

function App() {
  return (
    <section className="mb-5">
      <h1 className="mark fw-bold fs-1 p-2">CORS回避サンプル</h1>
      <FetchBox />
    </section>
  );
}

export default App;

このように、Reactコンポーネント内でFetch APIを使用しつつ、プロキシを設定することでCORSエラーを回避し、スムーズにAPI通信を行えます。プロキシ設定は開発環境向けの方法であるため、本番環境ではサーバー側に正しいCORS設定が必須です。特に、認証や保護されたAPIへアクセスする際には、追加設定も必要になるため、API側の仕様を確認しながら実装を進めるとよいでしょう。そして、CORSに関する理解が深まるほど、Reactを使ったアプリ開発でのエラー対応力が向上し、安心して外部のデータと連携できる仕組みを構築できるようになります。

先生と生徒の振り返り会話

生徒

「今日の内容で、ReactでCORSエラーが出る理由がやっとわかりました！外部のAPIにアクセスするときは注意が必要なんですね。」

先生

「そうですね。ブラウザは利用者を守るために制限を設けているので、理由を知ることが大切なんです。ReactでFetch APIを使うときは特に意識しておきましょう。」

生徒

「プロキシを設定すれば開発中は回避できるっていうのが安心でした。本番ではサーバー側の設定が必要になるっていう点も勉強になりました！」

先生

「その理解さえあれば大丈夫ですよ。Reactで外部APIとやり取りする場面は多いので、今回の内容をしっかり覚えておくと今後の開発が楽になります。」

生徒

「はい！Fetch APIでもっといろいろなデータを取りにいけるように練習してみます！」

先生