CORS

Część sekcji API REST ścieżki Node.js w Coddy. Lekcja 20 z 25.

Żądanie między różnymi źródłami PUT, PATCH lub DELETE albo żądanie z nagłówkiem Content-Type ustawionym na JSON zwykle sprawia, że przeglądarka najpierw prosi o pozwolenie. To żądanie OPTIONS jest żądaniem wstępnym. Odpowiedź musi zezwalać na źródło, metodę i nagłówki żądania.

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

Ustaw Access-Control-Allow-Origin w każdej odpowiedzi, również w odpowiedzi na żądanie wstępne. Jeśli zezwalasz na jedno źródło, możesz wysyłać tę stałą wartość w każdej odpowiedzi: przeglądarka porównuje ją ze źródłem strony. Każda wartość metod lub nagłówków to jeden ciąg znaków rozdzielonych przecinkami.

W przypadku OPTIONS wyślij odpowiedź 204 i zakończ odpowiedź. W przypadku innych metod zachowaj nagłówek źródła i wywołaj next(). Umieść to oprogramowanie pośredniczące jako pierwsze, przed express.json() i trasami, aby odpowiedzi z błędami również miały odpowiednie uprawnienia. Pasek żądań może sprawdzać nagłówki, ale tylko przeglądarki egzekwują zasady CORS.

Wyzwanie

Łatwy

Ten krok otwiera przygotowany w kursie projekt API do śledzenia zadań, a nie pliki projektu z lekcji Pagination (w tym routes/tasks.js). Twoja wcześniejsza praca pozostaje w swojej lekcji. Przed edycją server.js przeczytaj dostarczone pliki. Ta kopia zawiera trasy CRUD zadań, walidację, stronicowanie, filtry i sortowanie.

W pliku server.js, przed express.json() i trasami, dodaj middleware, które zezwala na https://board.example.com. Ustaw Access-Control-Allow-Origin na dokładnie ten origin, Access-Control-Allow-Methods na GET, POST, PUT, PATCH, DELETE, OPTIONS, a Access-Control-Allow-Headers na Content-Type. W przypadku OPTIONS odpowiedz kodem 204 i zakończ odpowiedź. W przypadku innych metod wywołaj next.

Wypróbuj: wyślij OPTIONS /api/tasks/2. Powinien pojawić się kod 204 i trzy nagłówki uprawnień. Wyślij GET /api/tasks: nadal zwraca listę zadań i nagłówek origin. POST {"title":"Order new chairs"} do /api/tasks nadal tworzy zadanie z kodem 201.

Spróbuj swoich sił

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

// Błędy z tras trafiają tutaj. Treść żądania, która nie jest poprawnym JSON-em, jest
// błędem klienta (400); wszystko inne jest naszym błędem (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');
});