CORS

جزء من قسم واجهات REST API في رحلة Node.js على Coddy. الدرس 20 من 25.

عادةً ما يجعل طلب PUT أو PATCH أو DELETE عابر للأصول، أو طلب يتضمن نوع محتوى JSON، المتصفح يطلب الإذن أولًا. يُسمى طلب OPTIONS هذا طلبًا تمهيديًا. يجب أن تسمح الاستجابة بالأصل والطريقة وترويسات الطلب.

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, POST, PATCH, OPTIONS
Access-Control-Allow-Headers: Content-Type

عيّن Access-Control-Allow-Origin في كل استجابة، بما في ذلك الطلب التمهيدي. عند السماح بأصل واحد، يمكنك إرسال تلك القيمة الثابتة في كل استجابة: يقارنها المتصفح بأصل الصفحة. تكون قيمة الطرق أو الترويسات سلسلة واحدة مفصولة بفواصل.

بالنسبة إلى OPTIONS، أرسل 204 وأنهِ الاستجابة. أما بالنسبة إلى الطرق الأخرى، فأبقِ ترويسة الأصل واستدعِ next(). ضع هذه البرمجية الوسيطة أولًا، قبل express.json() والمسارات، لكي تحصل استجابات الأخطاء أيضًا على الإذن. يمكن لشريط الطلبات فحص الترويسات، لكن المتصفحات وحدها هي التي تفرض CORS.

التحدي

سهل

تفتح هذه الخطوة مشروع واجهة برمجة التطبيقات لتتبّع المهام المُعدّ للدورة، بدلًا من ملفات مشروعك من Pagination (بما فيها routes/tasks.js). يبقى عملك السابق في درسه الخاص. اقرأ الملفات المقدّمة قبل تعديل server.js. تحتوي هذه النسخة على مسارات CRUD للمهام، والتحقق من الصحة، وتقسيم الصفحات، وعوامل التصفية، والترتيب.

في server.js، أضف برمجية وسيطة قبل express.json() والمسارات، تسمح بـ https://board.example.com. اضبط Access-Control-Allow-Origin على ذلك المصدر نفسه، وAccess-Control-Allow-Methods على GET، وPOST، وPUT، وPATCH، وDELETE، وOPTIONS، واضبط Access-Control-Allow-Headers على Content-Type. استجب بـ 204 وأنهِ الاستجابة لطلبات OPTIONS. أما الطرق الأخرى، فاستدعِ next.

جرّب ذلك: أرسل OPTIONS /api/tasks/2. ينبغي أن ترى 204 ورؤوس الأذونات الثلاثة. أرسل GET /api/tasks: سيظل يعرض قائمة المهام ورأس المصدر. وما زال POST {"title":"Order new chairs"} إلى /api/tasks ينشئ مهمةً برمز 201.

جرّب بنفسك

import express from 'express';
import { sendError } from './errors.js';
import taskRoutes from './routes/tasks.js';

const app = express();
app.use(express.json());

app.use('/api/tasks', taskRoutes);

// تنتهي هنا الأخطاء القادمة من المسارات. جسم الطلب الذي لا يحتوي على JSON صالح هو
// خطأ العميل (400)؛ وأي خطأ آخر فهو من جانبنا (500).
app.use((err, req, res, next) => {
    if (err.type === 'entity.parse.failed') {
        return sendError(res, 400, 'invalid_json', 'The body is not valid JSON');
    }
    console.error(err);
    sendError(res, 500, 'server_error', 'Something went wrong');
});

app.listen(3000, () => {
    console.log('Task tracker API on port 3000');
});