【JS応用｜初心者向け】初心者でもわかる！Fetch APIの「mode」プロパティでWeb通信を安全に制御する方法

1. なぜ「mode」を知る必要があるのか

Webサイトで外部のデータを読み込む際、私たちはよく「Fetch API」を使います。しかし、セキュリティの観点からブラウザは、異なるドメイン（サイト）への通信を厳しく制限しています。この通信のルールを決定するのがRequestオブジェクトの「mode」プロパティです。これを正しく理解することで、CORS（Cross-Origin Resource Sharing）エラーに悩まされず、安全にAPIと通信できるようになります。

2. 基礎知識：modeとは何か

「mode」は、リクエストが他のサイトに対してどのような振る舞いをするかを指定する設定項目です。主に以下の3つが重要です。

cors: デフォルト値。異なるドメインへの通信を許可しますが、相手先のサーバーが「許可する」と設定している必要があります。
no-cors: 制限された状態でリクエストを送ります。画像やスクリプトなどの読み込みに使われますが、レスポンスの中身は読み取れません。
same-origin: 自分のサイト内へのリクエストのみを許可します。外部への通信はエラーになります。

3. 実装と解決策

通常、外部APIを叩く際は「cors」モードを使います。もし通信がうまくいかない場合、それはブラウザがセキュリティのためにブロックしているからです。この場合、サーバー側でCORSの設定が必要になります。自分の制御下にないAPIを扱う際は、ブラウザの仕様に合わせた適切なモード設定が不可欠です。

4. サンプルプログラム

以下のコードは、外部のAPIからデータを取得する際の標準的な書き方です。

// 外部APIからデータを取得するサンプル
async function fetchData() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1';

  try {
    const response = await fetch(url, {
      method: 'GET',
      // modeを'cors'に設定（明示しなくてもデフォルトはこれです）
      mode: 'cors', 
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (!response.ok) {
      throw new Error('通信に失敗しました');
    }

    const data = await response.json();
    console.log('取得したデータ:', data);
  } catch (error) {
    // CORSエラーが発生した場合などはここに入ります
    console.error('エラー内容:', error.message);
  }
}

fetchData();

5. 応用・注意点

現場でよくある失敗は、「とりあえず動かないからno-corsに設定する」という対応です。しかし、no-corsモードではレスポンスの中身（JSONデータなど）をJavaScriptで読み取ることはできません。

APIからデータを受け取りたい場合は、必ずサーバー側で「Access-Control-Allow-Origin」ヘッダーが適切に設定されているかを確認してください。もしそれができない場合は、サーバーサイドでプロキシ（中継）サーバーを立てるのがフロントエンドエンジニアの一般的な解決策となります。セキュリティの穴を作らないよう、必要な通信だけを許可する意識を持ちましょう。