Claude Code के साथ Complete CORS Configuration Guide

Claude Code से CORS Configuration सही तरीके से Implement करें

CORS (Cross-Origin Resource Sharing) अलग-अलग origins के बीच safe communication को control करने की व्यवस्था है। Setting में गलती security risk या functionality failure का कारण बन सकती है। Claude Code का उपयोग करके, requirements के अनुसार CORS settings accurately implement की जा सकती हैं।

CORS की Basic Concepts

Preflight Request का Flow

> CORS के preflight request की mechanism समझाओ।
> Sequence diagram भी शामिल करो।

Browser “simple नहीं” request के case में OPTIONS method से preflight request भेजता है और server की permission confirm करता है। Custom headers या JSON format POST requests जैसे cases इसमें आते हैं।

Express.js में Configuration

Environment-wise CORS Configuration

> Express.js की CORS configuration बनाओ।
> Requirements:
> - Production में specific origins ही allow
> - Development में localhost allow
> - Authenticated requests support
> - Preflight cache

// 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;

    // Server-to-server communication (origin नहीं होता) allow करें
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} allowed नहीं है`));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Request-ID'],
  exposedHeaders: ['X-Total-Count', 'X-Request-ID'],
  maxAge: 86400, // Preflight cache: 24 घंटे
});

Next.js में Configuration

// 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 Configuration

> Nginx reverse proxy में CORS configuration add करो।

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;
}

Troubleshooting

Common Errors और Solutions

Claude Code में browser console error paste करने पर, cause और fix method तुरंत बता देता है।

Error example:

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.

Common causes:

• Server side पर CORS headers set नहीं हैं
• credentials: true use करते समय Access-Control-Allow-Origin: * specify किया है (specific origin specify करना ज़रूरी है)
• Preflight request के OPTIONS method को handle नहीं कर रहे

Security Notes

Access-Control-Allow-Origin: * सिर्फ authentication-free public APIs के लिए use करें। Authenticated requests में ज़रूर specific origin specify करें, और credentials: true के साथ combine करना ज़रूरी है।

Summary

Claude Code का उपयोग करके, environment के अनुसार CORS configuration accurately implement और troubleshooting efficiently किया जा सकता है। Web security headers configuration और API development guide भी reference के लिए देखें।

CORS के details के लिए MDN Web Docs - CORS देखें।