خطای Access-Control-Allow-Origin متوقف‌ کنندهٔ امنیتی مرورگرها برای جلوگیری از دسترسی غیرمجاز وب‌سایت‌ها به منابع یکدیگر است.

این خطا زمانی رخ می‌دهد که مرورگر شما بخواهد از یک دامنه، پروتکل یا پورت متفاوت به سروری دیگر درخواست (HTTP Request) ارسال کند.

در این حالت، مرورگر برای حفظ امنیت، ابتدا بررسی می‌کند که آیا آدرس مقصد اجازه دسترسی به این آدرس را صادر کرده است یا خیر.

اگر آدرس مقصد هدر Access-Control-Allow-Origin را در پاسخ خود نفرستاده باشد یا آدرس مبدا در آن تعریف نشده باشد، مرورگر جلوی دریافت اطلاعات را می‌گیرد و این خطا را نمایش می‌دهد.

برای مثال، اگر Frontend روی:

https://example.com

و API روی:

https://api.example.com

قرار داشته باشد، مرورگر بررسی می‌کند که آیا API اجازه دریافت درخواست از https://example.com را دارد یا خیر. در صورت عدم اجازه، خطایی مانند زیر نمایش داده می‌شود:

Access to fetch ... has been blocked by CORS policy

تنظیم CORS در Nuxt

برای تنظیم CORS در پروژه‌های Nuxt می‌توانید تنظیمات مربوط به هدرهای CORS را از طریق فایل nuxt.config.js انجام دهید.

فایل nuxt.config.js را باز کرده و بخش routeRules را به شکل زیر اضافه کنید:

export default defineNuxtConfig({
  routeRules: {
    '/api/**': {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization'
      }
    }
  }
})

در این حالت، درخواست‌های ارسال‌شده به مسیرهای /api/ از تمامی دامنه‌ها قابل دسترسی خواهند بود.

محدود کردن دسترسی به یک دامنه خاص

اگر می‌خواهید فقط یک دامنه مشخص اجازه دسترسی داشته باشد، مقدار Access-Control-Allow-Origin را به دامنه موردنظر تغییر دهید:

export default defineNuxtConfig({
  routeRules: {
    '/api/**': {
      headers: {
        'Access-Control-Allow-Origin': 'https://example.com',
        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization'
      }
    }
  }
})

پس از اعمال تغییرات، پروژه را مجدداً Build و Deploy کنید تا تنظیمات جدید اعمال شوند.