41 lines
4.6 KiB
Markdown
41 lines
4.6 KiB
Markdown
---
|
||
sidebar_position: 6
|
||
---
|
||
|
||
# CORS
|
||
|
||
**CORS** (Cross-Origin Resource Sharing) — это механизм, который позволяет веб-страницам запрашивать ресурсы с другого домена, отличного от того, с которого была загружена сама страница. Это важно, потому что браузеры по умолчанию блокируют такие запросы из соображений безопасности (это называется политикой одного источника — Same-Origin Policy).
|
||
|
||
## Как работает CORS:
|
||
1. **Запрос с другого источника:**
|
||
- Когда веб-страница пытается сделать запрос (например, через `fetch` или `XMLHttpRequest`) к ресурсу на другом домене, браузер автоматически добавляет в запрос заголовок `Origin`. Этот заголовок содержит домен, с которого был отправлен запрос.
|
||
2. **Ответ сервера:**
|
||
- Сервер, получив запрос, может разрешить или запретить доступ к ресурсу. Если сервер поддерживает CORS, он добавляет в ответ заголовок `Access-Control-Allow-Origin`, указывая, какие домены могут получить доступ к ресурсу.
|
||
- Например, если сервер разрешает доступ всем доменам, он может вернуть: \
|
||
`Access-Control-Allow-Origin: *` \
|
||
Если доступ разрешен только конкретному домену, то:
|
||
`Access-Control-Allow-Origin: https://example.com`
|
||
3. **Проверка браузером:**
|
||
- Браузер проверяет заголовок `Access-Control-Allow-Origin` в ответе сервера. Если значение заголовка совпадает с доменом, с которого был отправлен запрос (или это *), браузер разрешает доступ к данным. В противном случае запрос блокируется, и на странице возникает ошибка CORS.
|
||
4. **Предварительные запросы (Preflight):**
|
||
- Для некоторых типов запросов (например, с использованием методов, отличных от GET/POST, или с кастомными заголовками), браузер сначала отправляет предварительный запрос (OPTIONS), чтобы проверить, поддерживает ли сервер CORS и разрешает ли он такие запросы.
|
||
- Сервер должен ответить на этот запрос, указав разрешенные методы, заголовки и другие параметры.
|
||
|
||
## Пример
|
||
- Веб-страница на https://example.com делает запрос к API на https://api.example.com.
|
||
- Браузер отправляет запрос с заголовком: `Origin: https://example.com`
|
||
- Сервер отвечает: `Access-Control-Allow-Origin: https://example.com`
|
||
- Браузер проверяет заголовок и разрешает доступ к данным.
|
||
|
||
## Основные заголовки CORS:
|
||
- **Origin:** Указывает домен, с которого отправлен запрос.
|
||
- **Access-Control-Allow-Origin:** Указывает, какие домены могут получить доступ к ресурсу.
|
||
- **Access-Control-Allow-Methods:** Указывает разрешенные HTTP-методы (например, GET, POST).
|
||
- **Access-Control-Allow-Headers:** Указывает разрешенные заголовки в запросе.
|
||
- **Access-Control-Allow-Credentials:** Указывает, можно ли отправлять куки или другие учетные данные.
|
||
|
||
## Важно:
|
||
CORS работает только в браузерах. Серверные приложения (например, на Node.js или Python) не ограничены политикой CORS.
|
||
Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные.
|
||
|
||
🚀 **_Источник: DeepSeek_** |