CORS

Termasuk bagian REST API dalam perjalanan Node.js di Coddy. Pelajaran 13 dari 18.

Halaman di https://board.example.com memanggil API-mu dengan fetch, tetapi browser memblokir responsnya. Browser hanya mengizinkan halaman membaca respons dari origin miliknya sendiri, yaitu skema, host, dan port asalnya, kecuali server mengizinkan origin lain dengan header 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

Sebelum mengirim DELETE, PATCH, atau body JSON, browser mengirim preflight ini dan hanya melanjutkan jika respons mengizinkannya. Setiap respons lainnya juga memerlukan Access-Control-Allow-Origin. * mengizinkan origin apa pun, tetapi browser menolaknya saat halaman mengirim cookie (Access-Control-Allow-Credentials: true), jadi sebutkan origin-nya. Hanya browser yang menerapkan CORS: curl dan bilah permintaan mengabaikannya.

Tantangan

Mudah

Sebuah middleware sebelum rute menetapkan Access-Control-Allow-Origin: https://board.example.com dan Access-Control-Allow-Credentials: true pada setiap respons.
OPTIONS memberikan respons 204 dengan Access-Control-Allow-Methods yang mencantumkan GET, POST, PUT, PATCH, DELETE, dan Access-Control-Allow-Headers: Content-Type.

Simulasikan browser: kirim OPTIONS /api/tasks/2 dengan header Origin: https://board.example.com, lalu GET /api/tasks, dan baca header pada setiap respons.

Coba sendiri

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

// Error dari routes berakhir di sini. Body yang bukan JSON valid adalah
// kesalahan client (400); selebihnya kesalahan server kita (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');
});