CORS

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

Strona pod adresem https://board.example.com wywołuje Twoje API za pomocą fetch, a przeglądarka blokuje odpowiedź. Przeglądarki pozwalają stronie odczytywać odpowiedzi tylko z jej własnego źródła — schematu, hosta i portu, z których pochodzi — chyba że serwer zezwoli na inne źródła za pomocą nagłówków 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

Przed wysłaniem żądania DELETE, PATCH lub żądania z treścią JSON przeglądarka wysyła to żądanie preflight i kontynuuje tylko wtedy, gdy odpowiedź na nie na to pozwala. Każda inna odpowiedź również wymaga nagłówka Access-Control-Allow-Origin. * zezwala na dowolne źródło, ale przeglądarki odmawiają, gdy strona wysyła pliki cookie (Access-Control-Allow-Credentials: true), więc podaj konkretne źródło. Tylko przeglądarki egzekwują CORS: curl i pasek żądań ignorują te ograniczenia.

Wyzwanie

Łatwy

Oprogramowanie pośredniczące przed trasami ustawia Access-Control-Allow-Origin: https://board.example.com i Access-Control-Allow-Credentials: true w każdej odpowiedzi.
OPTIONS zwraca odpowiedź 204 z nagłówkiem Access-Control-Allow-Methods zawierającym GET, POST, PUT, PATCH, DELETE oraz nagłówkiem Access-Control-Allow-Headers: Content-Type.

Przetestuj przeglądarkę: wyślij OPTIONS /api/tasks/2 z nagłówkiem Origin: https://board.example.com, a następnie GET /api/tasks i odczytaj nagłówki każdej odpowiedzi.

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

// Tutaj trafiają błędy z tras. Treść żądania, która nie jest poprawnym JSON-em, to
// błąd klienta (400); wszystkie pozostałe błędy leżą po naszej stronie (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');
});