Fetch API と CORS 解説

Fetch API とクロスオリジンリクエストの完全ガイド

ウェブ開発において、外部APIへのアクセスや異なるオリジンのリソースを取得するために、JavaScriptの fetch() メソッドを使用することが一般的です。しかし、ウェブブラウザにはセキュリティ上の制約があり、クロスオリジンリクエスト（CORS）と呼ばれる問題が発生することがあります。この記事では、Fetch APIとクロスオリジンリクエストの概念、CORSの問題、そしてその解決策について詳しく解説します。

1. Fetch APIの基本

fetch() は、HTTPリクエストを送信するためのモダンなJavaScriptのAPIで、非同期処理を簡単に扱うことができます。以下は、fetch() の基本的な構文です：

javascript
CopyEdit
fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

fetch() は、デフォルトで GET リクエストを使用してリソースを取得します。また、レスポンスはPromiseで返されるため、then() を使って非同期に結果を処理できます。

2. クロスオリジンリクエストとは

クロスオリジンリクエスト（Cross-Origin Request）は、現在のウェブページとは異なるオリジン（ドメイン、プロトコル、ポートが異なる）からリソースを取得しようとするリクエストです。例えば、https://example.com から https://api.example.com にアクセスする場合が該当します。

ウェブブラウザは、セキュリティ上の理由から、同一オリジンポリシー（SOP）を適用しています。このポリシーにより、あるオリジンのスクリプトは、異なるオリジンからのリソースへのアクセスが制限されます。この制約は、ユーザーのプライバシーを保護するために必要なものですが、時にはAPIを利用するためにこれを回避する必要がある場合もあります。

3. CORS（クロスオリジンリソースシェアリング）とは

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でリソースを安全に共有するための仕組みです。CORSは、サーバー側で設定するヘッダーを通じて、特定のオリジンに対してリソースのアクセスを許可します。

例えば、あるサーバーが次のようなCORSヘッダーをレスポンスに含めている場合：

arduino
CopyEdit
Access-Control-Allow-Origin: https://example.com

これにより、https://example.com からのリクエストが許可され、他のオリジンからのリクエストは拒否されます。

4. CORSとFetch APIの使用例

fetch() を使ってクロスオリジンリクエストを行う際には、サーバーがCORSヘッダーを正しく設定している必要があります。以下は、CORSを考慮したfetch()リクエストの例です：

javascript
CopyEdit
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'cors'  // CORSリクエストであることを指定
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

この例では、mode: 'cors' を設定することにより、クロスオリジンリクエストとして処理されます。サーバー側が適切なCORSヘッダーを設定していない場合、リクエストはブロックされます。

5. CORSのエラーとその対応方法

CORSリクエストが失敗した場合、ブラウザのコンソールに次のようなエラーメッセージが表示されることがあります：

pgsql
CopyEdit
Access to fetch at 'https://api.example.com/data' from origin 'https://yourwebsite.com' has been blocked by CORS policy

このエラーは、サーバーがCORSヘッダーを正しく設定していないことを示しています。サーバー側でCORSを有効にする方法は、サーバーの種類に依存します。以下は、いくつかのサーバーでCORSを設定する例です：

• Node.js（Express）:

  javascript
  CopyEdit
  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  app.use(cors());  // CORSを許可
  

• PHP:

  php
  CopyEdit
  header("Access-Control-Allow-Origin: *");
  

• Apache（.htaccess ファイル）:

  apache
  CopyEdit
  Header set Access-Control-Allow-Origin "*"
  

6. Preflightリクエスト

CORSリクエストには、「プリフライトリクエスト」という仕組みもあります。これは、ブラウザがリソースにアクセスする前に、サーバーにHTTP OPTIONS リクエストを送信して、サーバーがCORSリクエストを許可するかどうかを確認するプロセスです。

例えば、Content-Type が application/json である場合や、Authorization ヘッダーを含むリクエストは、プリフライトリクエストを発行します。このリクエストに対して、サーバーが適切なCORSヘッダーを返さないと、実際のリクエストは送信されません。

7. Credentials（認証情報）とCORS

fetch() では、認証情報（クッキーやHTTP認証ヘッダーなど）をリクエストに含めることもできます。これを行う場合、credentials オプションを使用して設定します。例えば、クッキーを送信する場合は以下のように設定します：

javascript
CopyEdit
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include',  // クッキーを送信
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

credentials には、以下の3つのオプションがあります：

• omit: 認証情報を送信しません。
• same-origin: 同一オリジン内でのみ認証情報を送信します。
• include: クロスオリジンでも認証情報を送信します。

サーバー側も、この認証情報を受け入れるために適切なヘッダー（例えば、Access-Control-Allow-Credentials: true）を設定する必要があります。

8. まとめ

Fetch APIとCORSは、モダンなウェブアプリケーションにおいて不可欠な要素ですが、クロスオリジンリクエストを適切に管理するためには、サーバー側の設定が重要です。CORSエラーを解決するには、サーバーが適切なヘッダーを設定し、クライアント側で正しいリクエストオプションを使用することが求められます。

CORSを理解し、適切に使用することで、異なるオリジンからリソースを安全に取得し、APIとの連携をスムーズに行うことができます。