Если вы Front Developer или API Developer, вы сталкивались с этим термином много раз, поэтому давайте подробно обсудим, о чем эта политика. Давайте сначала посмотрим, что такое CORS.
Что такое CORS?
CORS, который объявляется w3c при взаимодействии между разными доменами, это механизм, сообщающий браузеру о доступе к ресурсам из разных источников или из другого источника, или способ для сервера проверить, разрешены ли входящие запросы, если они происходит из другого происхождения.
- Например, код JavaScript внешнего интерфейса для веб-приложения, обслуживаемого
http://abc.com
, используетXMLHttpRequest
для запросаhttp://abcd.com/
. - По соображениям безопасности браузеры имеют ограниченные HTTP-запросы из разных источников, инициируемые из скриптов.
- Механизм CORS поддерживает безопасные запросы из разных источников и передачу данных между браузерами и веб-серверами.
- Добавьте заголовок HTTP (Access-Control-Allow-Origin) на стороне сервера, чтобы принимать запросы от указанного домена или всех доменов или списка доменов.
Access-Control-Allow-Origin: *
Типы запросов CORS:
Как разработчик, вам нужно беспокоиться об этом, когда вы создаете запросы для отправки на сервер, но вы видите в сетевом журнале браузера, что вы найдете запрос, и он также влияет на производительность. Существует два типа запроса: простой и предпечатный.
Простой запрос:
Эти типы запросов представляют собой простой обмен заголовками CORS между клиентом и сервером для проверки разрешений. Чтобы запрос попал в эту категорию, он должен соответствовать нижеприведенным критериям.
Разрешенные методы:
GET
HEAD
POST
Разрешенные заголовки:
Accept
Accept-Language
Content-Language
Content-Type
(but note the additional requirements below)Last-Event-ID
DPR
Save-Data
Viewport-Width
Width
Разрешенный Content-Type
application/x-www-form-urlencoded
multipart/form-data
text/plain
- Слушатели событий не зарегистрированы ни для одного
XMLHttpRequestUpload
объекта, используемого в запросе; доступ к ним осуществляется с помощью свойстваXMLHttpRequest.upload
. - В запросе не используется объект
ReadableStream
.
Предполетный запрос:
Если запрос не соответствует вышеуказанным критериям, он попадает на предполетную проверку. Браузер автоматически отправляет HTTP-запрос перед исходным с помощью OPTIONS
method, чтобы проверить, безопасно ли отправлять исходный запрос. Если сервер указывает, что исходный запрос безопасен, он разрешит исходный запрос. В противном случае он заблокирует исходный запрос.
- Это
OPTIONS
запрос, использующий три заголовка HTTP-запроса:
Access-Control-Request-Method
Access-Control-Request-Headers
Origin
header
Посмотрим на примере
Клиент запрашивает у сервера, разрешит ли он запрос PUT, перед отправкой запроса PUT, используя предполетный запрос:
OPTIONS /api/
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://api.com
Если сервер позволяет, то он ответит на предполетный запрос заголовком ответа Access-Control-Allow-Methods
.
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://api.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
Access-Control-Allow-Origin
: источник, которому разрешено делать запрос, или*
, если запрос может быть сделан из любого источникаAccess-Control-Allow-Methods
: список разрешенных HTTP-методов, разделенных запятыми.Access-Control-Allow-Headers
: разделенный запятыми список настраиваемых заголовков, которые разрешено отправлять.Access-Control-Max-Age
: максимальная продолжительность, в течение которой ответ на предполетный запрос может быть кэширован до того, как будет сделан другой вызов.
Вот и все
Спасибо
Если вам нравится эта статья, пожалуйста, хлопайте в ладоши, а также, если вы хотите получать больше обновлений, подпишитесь, это побудит меня написать больше полезных статей.