ClaudeCodeLab
Use Cases

Claude CodeでCORS設定完全ガイド：クロスオリジン通信の実践解説

Claude Codeを活用したCORS設定の完全ガイド。プリフライトリクエスト、認証付きリクエスト、トラブルシューティングまで実践的に解説します。

CORS設定をClaude Codeで正しく実装する

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間での安全な通信を制御する仕組みです。設定ミスはセキュリティリスクや機能不全につながります。Claude Codeを使えば、要件に合ったCORS設定を正確に実装できます。

CORSの基本概念

プリフライトリクエストの流れ

> CORSのプリフライトリクエストの仕組みを説明して。
> シーケンス図も含めて。

ブラウザは「単純でないリクエスト」の場合、OPTIONSメソッドでプリフライトリクエストを送信し、サーバーの許可を確認します。カスタムヘッダーやJSON形式のPOSTリクエストなどが該当します。

Express.jsでの設定

環境別CORS設定

> Express.jsのCORS設定を作成して。
> 要件：
> - 本番は特定オリジンのみ許可
> - 開発はlocalhost許可
> - 認証付きリクエスト対応
> - プリフライトキャッシュ
// src/middleware/cors.ts
import cors from 'cors';

const allowedOrigins: Record<string, string[]> = {
  production: [
    'https://myapp.example.com',
    'https://admin.example.com',
  ],
  development: [
    'http://localhost:3000',
    'http://localhost:5173',
  ],
};

export const corsMiddleware = cors({
  origin: (origin, callback) => {
    const env = process.env.NODE_ENV || 'development';
    const origins = allowedOrigins[env] || allowedOrigins.development;

    // サーバー間通信（originなし）は許可
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} は許可されていません`));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Request-ID'],
  exposedHeaders: ['X-Total-Count', 'X-Request-ID'],
  maxAge: 86400, // プリフライトキャッシュ: 24時間
});

Next.jsでの設定

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: 'https://myapp.example.com' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Max-Age', value: '86400' },
        ],
      },
    ];
  },
};

Nginx/CDNでのCORS設定

> NginxのリバースプロキシでCORS設定を追加して。
location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    proxy_pass http://backend;
}

トラブルシューティング

よくあるエラーと解決策

Claude Codeにブラウザのコンソールエラーを貼り付けると、原因と修正方法を即座に教えてくれます。

エラー例：

Access to XMLHttpRequest at 'https://api.example.com/data' from origin
'https://myapp.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.

よくある原因：

  • サーバー側でCORSヘッダーが設定されていない
  • credentials: true 使用時に Access-Control-Allow-Origin: * を指定している（特定オリジンを指定する必要がある）
  • プリフライトリクエストのOPTIONSメソッドをハンドリングしていない

セキュリティ上の注意

Access-Control-Allow-Origin: * は認証不要の公開APIにのみ使用してください。認証付きリクエストでは必ず特定オリジンを指定し、credentials: true と組み合わせる必要があります。

まとめ

Claude Codeを使えば、環境に応じたCORS設定を正確に実装し、トラブルシューティングも効率化できます。Webセキュリティヘッダー設定やAPI開発ガイドも合わせて参考にしてください。

CORSの詳細はMDN Web Docs - CORSを参照してください。

#Claude Code #CORS #セキュリティ #API #Web開発

関連記事