CORS ב-Express: איך מתקנים שגיאת CORS (עם cors ובלי)

שגיאת CORS ("No 'Access-Control-Allow-Origin' header is present") אומרת שדף web ב-origin אחד, כמו http://localhost:5173, קרא ל-API שלכם ב-origin אחר, והדפדפן סירב לתת לדף לקרוא את התשובה כי התשובה לא אמרה שה-origin הזה מותר. התיקון הוא בשרת: שלחו Access-Control-Allow-Origin עם ה-origin של הדף, וענו לבקשת ה-preflight ‏OPTIONS של הדפדפן עם ה-methods וה-headers שאתם מקבלים. ב-Express אלה כמה שורות של middleware, או app.use(cors()) מהחבילה cors.

const express = require('express');
const app = express();

const ALLOWED_ORIGIN = 'https://app.example.com';

function cors(req, res, next) {
    res.set('Access-Control-Allow-Origin', ALLOWED_ORIGIN);
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
        res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
        res.set('Access-Control-Max-Age', '600');
        return res.sendStatus(204);
    }
    next();
}

app.use(cors);

app.get('/api/products', (req, res) => {
    res.json([{ id: 1, name: 'Lamp' }]);
});

app.put('/api/products/:id', (req, res) => {
    res.json({ updated: req.params.id });
});

// GET /api/products
app.listen(3000);

התשובה היא רשימת המוצרים, ולשונית ה-Headers שלה מציגה access-control-allow-origin: https://app.example.com: דף ב-origin הזה רשאי לקרוא אותה. עכשיו שלחו OPTIONS /api/products/1 עם ה-headers ‏Origin: https://app.example.com ו-Access-Control-Request-Method: PUT. זה ה-preflight שדפדפן שולח לפני PUT, והתשובה היא 204 עם ה-methods וה-headers המותרים ובלי גוף.

מה הדפדפן בודק

דפים מאותו origin לא צריכים כלום. בבקשה בין origins הדפדפן קורא את ה-headers האלה בתשובה:

GET פשוט או POST בסגנון טופס הולכים ישר לשרת, והדפדפן בודק את Access-Control-Allow-Origin בתשובה. השרת עדיין מריץ את הבקשה; CORS רק מחליט אם הדף רואה את התוצאה. לפני בקשה עם גוף JSON, עם header ‏Authorization, או עם method כמו PUT או DELETE נשלחת בקשת preflight ‏OPTIONS, והבקשה האמיתית נשלחת רק אם תשובת ה-preflight מתירה אותה. בגלל זה middleware של CORS חייב לענות ל-OPTIONS לפני שכל route או בדיקת הרשאה רצים.

להתיר כמה origins, עם credentials

Access-Control-Allow-Origin מחזיק origin אחד או *, אף פעם לא רשימה. כדי להתיר כמה, השוו את ה-header ‏Origin של הבקשה לרשימת היתרים והחזירו אותו כשהוא תואם:

const express = require('express');
const app = express();

const allowed = new Set(['https://app.example.com', 'http://localhost:5173']);

app.use((req, res, next) => {
    const origin = req.get('origin');
    if (origin && allowed.has(origin)) {
        res.set('Access-Control-Allow-Origin', origin);
        res.set('Access-Control-Allow-Credentials', 'true');
    }
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST');
        res.set('Access-Control-Allow-Headers', 'Content-Type');
        return res.sendStatus(204);
    }
    next();
});

app.get('/api/me', (req, res) => {
    res.json({ origin: req.get('origin') ?? null });
});

app.listen(3000);

לבקשה הראשונה אין header ‏Origin, כמו קריאה מ-curl או מדף באותו origin, ולכן היא מקבלת {"origin":null} ובלי headers של CORS. שלחו GET /api/me עם ה-header ‏Origin: http://localhost:5173, ולשונית ה-Headers תציג את ה-origin הזה חוזר בתשובה ועוד access-control-allow-credentials: true. שנו את ה-header ל-Origin: https://evil.example ושני ה-headers של CORS נעלמים: השרת עדיין עונה, אבל דפדפן היה חוסם את הדף מלקרוא את התשובה. Access-Control-Allow-Credentials: true מאפשר לדף לשלוח cookies (עם fetch(url, { credentials: 'include' })), ודפדפנים דוחים אותו יחד עם *, ולכן credentials תמיד צריכים את ה-origin המדויק.

החבילה cors

החבילה cors עושה את אותה עבודה עם אפשרויות. התקינו אותה עם npm install cors:

const cors = require('cors');

// Any origin, no cookies: fine for a public read-only API.
app.use(cors());

// Only your frontend, with cookies.
app.use(cors({
    origin: ['https://app.example.com', 'http://localhost:5173'],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));

// One route only.
app.get('/api/public', cors(), handler);

כשקוראים ל-cors() בלי אפשרויות, הוא שולח Access-Control-Allow-Origin: * ועונה לכל preflight. השתמשו ב-* רק לנתונים ציבוריים שלא צריכים התחברות.

טעויות נפוצות

להוסיף CORS אחרי ה-routes או אחרי middleware של אימות. בקשת ה-preflight ‏OPTIONS לא נושאת header ‏Authorization, אז בדיקת הרשאה שנמצאת ראשונה עונה לה עם 401 והדפדפן מדווח על שגיאת CORS. רשמו את ה-middleware של CORS ראשון.

להגדיר * עם credentials. דפדפנים דוחים את התשובה. החזירו את ה-origin המסוים במקום.

לנסות לתקן CORS ב-frontend. אפשרויות בקשה כמו mode: 'no-cors' לא מסירות את ההגבלה; הן נותנות תשובה אטומה שאי אפשר לקרוא. רק ה-headers של השרת מתקנים את זה.

איך app.use() וסדר ה-middleware עובדים, ראו middleware ב-Express.