Sửa lỗi CORS trong Express, có và không dùng package cors

Lỗi CORS ("No 'Access-Control-Allow-Origin' header is present") nghĩa là một trang web ở một origin, chẳng hạn http://localhost:5173, đã gọi API của bạn ở một origin khác, và trình duyệt từ chối cho trang đọc response vì response không nói rằng origin đó được phép. Cách sửa nằm ở máy chủ: gửi Access-Control-Allow-Origin kèm origin của trang, và trả lời request preflight OPTIONS của trình duyệt bằng các phương thức và header bạn chấp nhận. Trong Express, việc đó chỉ cần vài dòng middleware, hoặc app.use(cors()) từ package 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);

Response là danh sách sản phẩm, và tab Headers của nó cho thấy access-control-allow-origin: https://app.example.com: một trang thuộc origin đó được phép đọc nó. Giờ hãy gửi OPTIONS /api/products/1 với các header Origin: https://app.example.com và Access-Control-Request-Method: PUT. Đó là preflight mà trình duyệt gửi trước một PUT, và câu trả lời là 204 kèm các phương thức và header được phép, không có body.

Trình duyệt kiểm tra những gì

Các trang cùng origin không cần gì cả. Với một request khác origin, trình duyệt đọc các header response sau:

Một request GET đơn giản hoặc POST kiểu biểu mẫu được gửi thẳng tới máy chủ, và trình duyệt kiểm tra Access-Control-Allow-Origin trên câu trả lời. Máy chủ vẫn xử lý request; CORS chỉ quyết định trang có được thấy kết quả hay không. Một request có body JSON, có header Authorization, hoặc dùng phương thức như PUT hay DELETE sẽ được đi trước bởi một request preflight OPTIONS, và request thật chỉ được gửi nếu câu trả lời preflight cho phép. Đó là lý do một middleware CORS phải trả lời OPTIONS trước khi bất kỳ route hay bước kiểm tra xác thực nào chạy.

Cho phép nhiều origin, kèm credentials

Access-Control-Allow-Origin chứa một origin hoặc *, không bao giờ là một danh sách. Để cho phép nhiều origin, hãy so sánh header Origin của request với một danh sách cho phép và gửi lại đúng origin đó khi khớp:

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

Request đầu tiên không có header Origin, giống một lời gọi từ curl hoặc từ trang cùng origin, nên nó nhận {"origin":null} và không có header CORS nào. Gửi GET /api/me với header Origin: http://localhost:5173 thì tab Headers cho thấy origin đó được gửi lại, kèm access-control-allow-credentials: true. Đổi header thành Origin: https://evil.example thì cả hai header CORS biến mất: máy chủ vẫn trả lời, nhưng trình duyệt sẽ chặn trang đọc câu trả lời. Access-Control-Allow-Credentials: true cho phép trang gửi cookie (với fetch(url, { credentials: 'include' })), và trình duyệt từ chối nó khi đi cùng *, nên credentials luôn cần đúng origin cụ thể.

Package cors

Package cors làm cùng công việc đó thông qua các tùy chọn. Cài đặt bằng 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);

Khi gọi không có tùy chọn, cors() gửi Access-Control-Allow-Origin: * và trả lời mọi preflight. Chỉ dùng * cho dữ liệu công khai không cần đăng nhập.

Những lỗi thường gặp

Thêm CORS sau các route hoặc sau middleware xác thực. Request preflight OPTIONS không mang header Authorization, nên một bước kiểm tra xác thực đặt trước sẽ trả lời nó bằng 401 và trình duyệt báo lỗi CORS. Hãy đăng ký middleware CORS đầu tiên.

Đặt * kèm credentials. Trình duyệt sẽ từ chối response. Hãy gửi lại đúng origin cụ thể.

Cố sửa CORS ở frontend. Các tùy chọn request như mode: 'no-cors' không gỡ bỏ được giới hạn; chúng cho bạn một response "mờ" (opaque) mà bạn không đọc được. Chỉ header từ máy chủ mới sửa được lỗi này.

Để biết app.use() và thứ tự middleware hoạt động thế nào, xem middleware trong Express.