CORS

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

דף ב־https://board.example.com קורא ל־API שלך באמצעות fetch, והדפדפן חוסם את התשובה. דפדפנים מאפשרים לדף לקרוא תשובות רק מה־origin שלו עצמו — הסכמה, המארח והפורט שמהם הוא הגיע — אלא אם השרת מאפשר מקורות אחרים באמצעות כותרות CORS.

OPTIONS /api/products/7
Origin: https://shop.example.com
Access-Control-Request-Method: DELETE

204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, DELETE
Access-Control-Allow-Headers: Content-Type

לפני בקשת DELETE, בקשת PATCH או שליחת גוף JSON, הדפדפן שולח את בקשת ה־preflight הזאת וממשיך רק אם התשובה מתירה זאת. גם כל תשובה אחרת זקוקה לכותרת Access-Control-Allow-Origin. הערך * מאפשר כל מקור, אבל דפדפנים מסרבים לאפשר זאת כשהדף שולח עוגיות (Access-Control-Allow-Credentials: true), לכן יש לציין את המקור. רק דפדפנים אוכפים את CORS: curl וסרגל הבקשות מתעלמים ממנו.

אתגר

קל

תוכנת ביניים לפני הנתיבים מגדירה את Access-Control-Allow-Origin: https://board.example.com ואת Access-Control-Allow-Credentials: true בכל תשובה.
בקשת OPTIONS מחזירה 204, עם Access-Control-Allow-Methods שמפרט את GET, POST, PUT, PATCH, DELETE, ועם Access-Control-Allow-Headers: Content-Type.

שחקו את תפקיד הדפדפן: שלחו OPTIONS /api/tasks/2 עם הכותרת Origin: https://board.example.com, ואז GET /api/tasks, וקראו את הכותרות של כל תשובה.

נסו בעצמכם

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');
});