CORS

Termasuk bagian REST API dalam perjalanan Node.js di Coddy. Pelajaran 20 dari 25.

Permintaan PUT, PATCH, atau DELETE lintas-origin, atau permintaan dengan Content-Type JSON, biasanya membuat browser meminta izin terlebih dahulu. Permintaan OPTIONS ini adalah preflight. Respons harus mengizinkan origin, method, dan header permintaan.

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

Tetapkan Access-Control-Allow-Origin pada setiap respons, termasuk preflight. Dengan satu origin yang diizinkan, kamu dapat mengirim nilai tetap itu pada setiap respons: browser membandingkannya dengan origin halaman. Setiap nilai method atau header berupa satu string yang dipisahkan koma.

Untuk OPTIONS, kirim 204 dan akhiri respons. Untuk method lain, pertahankan header origin dan panggil next(). Letakkan middleware ini paling awal, sebelum express.json() dan rute, agar respons error juga mendapat izin. Bilah permintaan dapat memeriksa header, tetapi hanya browser yang menerapkan CORS.

Tantangan

Mudah

Langkah ini membuka proyek API pelacak tugas yang telah disiapkan untuk kursus, bukan file proyekmu dari Pagination (termasuk routes/tasks.js). Pekerjaanmu sebelumnya tetap berada di pelajarannya sendiri. Baca file yang disediakan sebelum mengedit server.js. Salinan ini berisi rute CRUD tugas, validasi, paginasi, filter, dan pengurutan.

Di server.js, sebelum express.json() dan rute, tambahkan middleware yang mengizinkan https://board.example.com. Atur Access-Control-Allow-Origin ke origin persis tersebut, Access-Control-Allow-Methods ke GET, POST, PUT, PATCH, DELETE, OPTIONS, dan Access-Control-Allow-Headers ke Content-Type. Untuk OPTIONS, kirim respons 204 lalu akhiri. Untuk metode lain, panggil next.

Coba: kirim OPTIONS /api/tasks/2. Kamu seharusnya melihat 204 dan tiga header izin. Kirim GET /api/tasks: hasilnya tetap berupa daftar tugas dan header origin. POST {"title":"Order new chairs"} ke /api/tasks tetap membuat tugas dengan 201.

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 ditangani di sini. Body yang bukan JSON valid adalah
// kesalahan client (400); selebihnya adalah 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');
});