toolsmoah

CORSテスター

Cross-Origin Resource Sharing（CORS）ポリシーとAPIリクエストをテスト・デバッグ

リクエスト設定
テスト用のAPIリクエストを設定してください
リクエスト例
事前定義されたAPIリクエストをお試しください
CORS情報
CORSに関する基本情報

CORSとは？ CORS（Cross-Origin Resource Sharing）は、Webブラウザでスクリプトから異なるオリジン（ドメイン、プロトコル、ポート）へのリクエストを許可するメカニズムです。

主要なCORSヘッダー

  • Access-Control-Allow-Origin: リソースへのアクセスを許可するオリジンを指定
  • Access-Control-Allow-Methods: 許可されるHTTPメソッドを指定
  • Access-Control-Allow-Headers: 使用可能なHTTPヘッダーを指定
  • Access-Control-Allow-Credentials: 資格情報（クッキー、HTTP認証）を含めるかどうかを指定

💡 CORS解決策

サーバーサイド解決策

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

クライアントサイド解決策

1. プロキシサーバーの使用:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (GETのみ):

// 制限がありますが、シンプルなソリューション
          fetch('api?callback=handleResponse')

🔧 環境別CORS設定

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

環境別CORS設定

テストシナリオ

  • • シンプルリクエスト: GETリクエストでの基本的なCORS動作をテスト
  • • プリフライトリクエスト: PUT/DELETEメソッドでのプリフライトリクエストをテスト
  • • カスタムヘッダー: Authorizationヘッダーを含むリクエストをテスト
  • • 資格情報: クッキーを含むリクエストをテスト
  • • エラーハンドリング: 失敗シナリオをテスト

セキュリティ考慮事項

  • • セキュリティリスクのため、ワイルドカード（*）の使用には注意が必要
  • • 最小権限の原則：必要なオリジンとメソッドのみを許可
  • • 資格情報の制限：資格情報を含める場合は特定のオリジンのみを許可
  • • 定期的な見直し：CORSポリシーを定期的に確認・更新

CORSデバッグのコツ

ブラウザ開発者ツール

  • • ネットワークタブでOPTIONSリクエストを確認
  • • コンソールでCORSエラーメッセージを確認
  • • レスポンスヘッダーでCORSヘッダーを確認

便利なツール

  • • CORSテスター（このツール）
  • • Postman（APIテスト用）
  • • curlコマンド（サーバー直接テスト用）
    CORSテスター