ربط الواجهة الأمامية بالـ API

١نوعان من الصفحات

حتى الآن كان الخادم يبني صفحة HTML كاملة مع كل طلب. والأسلوب الآخر المنتشر اليوم: الخادم يرسل صفحة ثابتة فيها JavaScript، ثم يطلب JavaScript البيانات من الـ API بـ fetch، ويحدّث الصفحة دون إعادة تحميلها. هكذا تعمل تطبيقات React (مقرر 242) وتطبيقات الجوال (251).

ولاحظ أن الـ API نفسها من الدرس السابق تخدم الصفحة، وتخدم تطبيق الجوال، وأي عميل آخر. فالواجهة الخلفية الواحدة تخدم واجهات أمامية كثيرة.

٢التطبيق كاملًا: صفحة + API

ملف index.html فيه HTML و JavaScript فقط (من مقرر 131)، وملف api/users.php هو واجهة الدرس 22 دون أي تغيير. شغّل المختبر وجرّب الإضافة والحذف، ثم افتح «📜 السجل»: سترى كل طلب أرسله fetch إلى الخادم:

٣ثلاث قواعد لـ fetch مع API

1. fetch لا ترمي خطأ عند 404 أو 422. ترمي فقط إن انقطع الاتصال. فافحص res.ok (صحيح للرموز 200–299) أو res.status بنفسك.
2. أرسل JSON بترويسته: Content-Type: application/json و JSON.stringify(data)، وإلا لن يفهم الخادم الجسم.
3. الرد 204 بلا جسم: لا تستدعِ res.json() عليه فيفشل.

async function api(method, url, data) {  const res = await fetch(url, {    method,    headers: data ? { 'Content-Type': 'application/json' } : {},    body: data ? JSON.stringify(data) : undefined,  });  const body = res.status === 204 ? null : await res.json();  if (!res.ok) throw new Error(body?.error || 'HTTP ' + res.status);  return body;} // الاستخدامtry {  const user = await api('POST', 'api/users.php', { name: 'ريم', email: 'r@tvtc.sa' });} catch (e) {  alert(e.message);       // رسالة الخادم نفسها: «البريد مسجّل من قبل»}

٤CORS: حين تكون الواجهة على عنوان آخر

في المثال السابق الصفحة والـ API على العنوان نفسه. لكن أثناء تطوير React تعمل الواجهة على http://localhost:5173 والـ API على http://localhost: «أصلان» Origins مختلفان. والمتصفح يمنع لحماية المستخدمين أن تقرأ صفحة من أصل ردود أصل آخر، إلا إذا سمح الخادم صراحة. هذه السياسة اسمها CORS (مشاركة الموارد بين الأصول).

1. المتصفح يرسل مع الطلب الترويسة Origin: http://localhost:5173.
2. إن كان الطلب «غير بسيط» (مثل POST بجسم JSON، أو DELETE) يرسل أولًا طلبًا تمهيديًّا OPTIONS يسأل: هل تسمح؟
3. الخادم يجيب بترويسات Access-Control-Allow-….
4. إن وافقت، يرسل المتصفح الطلب الحقيقي ويعطي الرد للصفحة؛ وإلا يحجبه ويظهر خطأ CORS في Console.

<?php$allowed = ['http://localhost:5173', 'https://app.tvtc-demo.sa'];$origin = $_SERVER['HTTP_ORIGIN'] ?? ''; if (in_array($origin, $allowed, true)) {    header("Access-Control-Allow-Origin: $origin");    header('Access-Control-Allow-Methods: GET, POST, DELETE');    header('Access-Control-Allow-Headers: Content-Type, Authorization');    header('Vary: Origin');}if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {    http_response_code(204);      // الطلب التمهيدي: الترويسات تكفي    exit;}header('Content-Type: application/json');echo '{"pong": true}';