toolsmoah

تستر CORS

تست و اشکال‌زدایی سیاست‌های اشتراک منابع بین مبدأ (CORS) و درخواست‌های API

تنظیمات درخواست
درخواست API خود را برای تست پیکربندی کنید
نمونه درخواست‌ها
این درخواست‌های API از پیش تعریف شده را امتحان کنید
اطلاعات CORS
اطلاعات اولیه در مورد CORS

CORS چیست؟ CORS (اشتراک منابع بین مبدأ) مکانیزمی است که به مرورگرهای وب اجازه می‌دهد تا درخواست‌های بین مبدأ (دامنه، پروتکل یا پورت متفاوت) را از اسکریپت‌های در حال اجرا در مرورگر انجام دهند.

هدرهای کلیدی 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 بر اساس محیط

سناریوهای تست

  • • درخواست ساده: تست رفتار پایه CORS با درخواست‌های GET
  • • درخواست پیش‌پرواز: تست درخواست‌های پیش‌پرواز با متدهای PUT/DELETE
  • • هدرهای سفارشی: تست درخواست‌ها با هدر Authorization
  • • اعتبارنامه‌ها: تست درخواست‌ها با کوکی‌ها
  • • مدیریت خطا: تست سناریوهای شکست

ملاحظات امنیتی

  • • به دلیل خطرات امنیتی، در استفاده از کاراکترهای عام (*) احتیاط کنید
  • • اصل حداقل امتیاز: فقط مبدأها و متدهای ضروری را مجاز کنید
  • • محدودیت‌های اعتبارنامه: فقط مبدأهای خاص را هنگام درج اعتبارنامه‌ها مجاز کنید
  • • بررسی منظم: سیاست‌های CORS را به صورت دوره‌ای بررسی و به‌روزرسانی کنید

نکات اشکال‌زدایی CORS

ابزارهای توسعه‌دهنده مرورگر

  • • درخواست‌های OPTIONS را در تب Network بررسی کنید
  • • به دنبال پیام‌های خطای CORS در کنسول باشید
  • • هدرهای CORS را در هدرهای پاسخ تأیید کنید

ابزارهای مفید

  • • تستر CORS (این ابزار)
  • • Postman (برای تست API)
  • • دستور curl (برای تست مستقیم سرور)
    تستر CORS