Ответ
CORS (Cross-Origin Resource Sharing) позволяет настраивать:
- Методы HTTP:
Access-Control-Allow-Methods(GET, POST, PUT и т.д.). - Заголовки:
Access-Control-Allow-Headers(Content-Type, Authorization и др.). - Куки и учетные данные:
Access-Control-Allow-Credentials: true. - Время кеширования:
Access-Control-Max-Age(в секундах). - Доп. заголовки для клиента:
Access-Control-Expose-Headers.
Пример настройки сервера (Node.js + Express):
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://example.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', 'true');
next();
}); Ответ 18+ 🔞
А, ну это же про CORS, про эту вечную головную боль всех фронтендеров! Слушай, представляешь картину: твой браузер, такой бдительный сторожевой пёс, стоит на границе между сайтами. И вот твой скрипт с localhost:3000 пытается стянуть данные с api.krutoi-servis.ru. А пёс — бац лапой на запрос! «Не-не-не, браток, — говорит, — откуда запрос, нахуй? С какого перепугу?».
И вот чтобы этого пса успокоить, сервер должен крикнуть специальные заголовки. Это как пропуск, блядь. «Пусти, это свои!».
Ну, смотри, что можно этим пропуском настраивать, это просто ёперный театр:
- Какие методы пускать?
Access-Control-Allow-Methods. Ну, там GET, POST, PUT — стандартный набор, но можно и экзотику какую, если сервер понимает. - Какие заголовки в запросе разрешены?
Access-Control-Allow-Headers. Типа, «я, сервер, готов принять не толькоContent-Type: text/plain, но и, например,Authorization: Bearer blablabla». А то без этого заголовка клиент и не пошлёт его, дурак. - А с печеньками можно? О, это отдельная история!
Access-Control-Allow-Credentials: true. Это чтобы куки и HTTP-авторизация летели вместе с запросом. Но тут, внимание, ёпта! Если этоtrue, то вAccess-Control-Allow-Originнельзя писать звёздочку*. Надо явно указать домен, вот такая, блядь, хитрая жопа. - Надолго ли пропуск?
Access-Control-Max-Age. Укажешь секунды — и браузер не будет каждый раз приставать с предварительным запросом (OPTIONS), а запомнит правила. Удобно, но осторожно. - А какие заголовки в ответе клиенту показывать?
Access-Control-Expose-Headers. Ну, браузер по умолчанию скрывает от твоего JS некоторые служебные заголовки из ответа. А если тебе, например,X-Total-Countот пагинации нужен — вот тут и пропишешь.
Ну и как это выглядит в коде, например, на Node.js с Express? Да вот, смотри, примерно так:
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://example.com'); // Только этому сайту доверяем
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // Можно вот так
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // А такие заголовки в запросе принимаем
res.header('Access-Control-Allow-Credentials', 'true'); // И с куками тоже, да
next();
});
Вот и вся магия. Главное — не забыть, что если запросы идут с кредами (куками), то Origin должен быть конкретным, а не *, иначе будет тебе, чувак, волнение ебать в консоли браузера. Всё, теперь можешь идти и настраивать, только не перепутай, а то опять CORS policy тебе в сраку.