كيفية إصلاح أخطاء "سياسة CORS" في React مع واجهة Laravel

المشكلة

تظهر لك هذه الرسالة في وحدة تحكّم المتصفّح:

Access to fetch at 'http://localhost:8000/api/users' from origin
'http://localhost:3000' has been blocked by CORS policy

لماذا يحدث هذا

تحظر المتصفّحات الطلبات من أصل (localhost:3000) إلى آخر (localhost:8000) لأسباب أمنية. ويُسمّى هذا سياسة الأصل نفسه (Same-Origin Policy).

الحل: إعداد CORS في Laravel

الخطوة 1: تحديث config/cors.php

<?php

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [
        'http://localhost:3000',
        'http://localhost:5173', // Vite
        env('FRONTEND_URL', 'https://yourapp.com'),
    ],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

الخطوة 2: إعداد React/Axios

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8000/api',
    withCredentials: true, // Important for cookies!
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    }
});

export default api;

الخطوة 3: لـ Laravel Sanctum (مصادقة SPA)

// First, get CSRF cookie
await axios.get('http://localhost:8000/sanctum/csrf-cookie', {
    withCredentials: true
});

// Then login
await api.post('/login', { email, password });

أخطاء شائعة

• نسيان withCredentials: true
• استخدام '*' في allowed_origins مع بيانات الاعتماد
• عدم تضمين sanctum/csrf-cookie في المسارات

قائمة تحقّق الإنتاج

• استخدم أصولاً محددة، لا '*' أبداً
• استخدم متغيّرات البيئة للروابط
• اختبر كلاً من HTTP و HTTPS