Если вы 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-запрос перед исходным с помощью OPTIONSmethod, чтобы проверить, безопасно ли отправлять исходный запрос. Если сервер указывает, что исходный запрос безопасен, он разрешит исходный запрос. В противном случае он заблокирует исходный запрос.

  • Это 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: максимальная продолжительность, в течение которой ответ на предполетный запрос может быть кэширован до того, как будет сделан другой вызов.

Вот и все

Спасибо

Если вам нравится эта статья, пожалуйста, хлопайте в ладоши, а также, если вы хотите получать больше обновлений, подпишитесь, это побудит меня написать больше полезных статей.