CORS

חלק מהיחידה REST APIs במסלול ה-Node.js של Coddy. שיעור 20 מתוך 25.

בקשת PUT, PATCH או DELETE חוצת מקור, או בקשה עם Content-Type מסוג 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.

אתגר

קל

השלב הזה פותח את פרויקט ה-API המוכן של מעקב המשימות בקורס, ולא את קובצי הפרויקט שלך מתוך עימוד (כולל routes/tasks.js). העבודה הקודמת שלך נשארת בשיעור משלה. קרא את הקבצים שסופקו לפני עריכת server.js. העותק הזה מכיל נתיבי CRUD למשימות, אימות, עימוד, מסננים ומיון.

ב-server.js, לפני express.json() והנתיבים, הוסף middleware שמתיר גישה מ-https://board.example.com. הגדר את Access-Control-Allow-Origin למקור המדויק הזה, את Access-Control-Allow-Methods ל-GET, POST, PUT, PATCH, DELETE, OPTIONS, ואת Access-Control-Allow-Headers ל-Content-Type. עבור OPTIONS, החזר 204 וסיים. עבור שיטות אחרות, קרא ל-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');
});