Краткий обзор того, из чего состоит URL, как работают HTTP-запросы, некоторые важные заголовки запросов, совместное использование ресурсов между источниками (CORS).

Прежде всего, давайте начнем с того, как выглядит URL (универсальный указатель ресурсов).

Пример URL-адреса состоит из 4 частей.

СХЕМА: Схема определяет протокол, который будет использоваться. Протокол определяет, как данные передаются и как интерпретировать запрос. Когда вы посмотрите на протокол, вы поймете, для чего используется этот URL. (Например, это протокол электронной почты с SMTP, POP3, IMAP, или это запрос SSH для доступа и управления репозиториями git, или это HTTP-запрос для Интернета)

HTTP - по умолчанию работает на порту 80, он указывает, какие заголовки содержатся в запросе.

HTTPS - то же самое, что и протокол HTTP, но HTTPS считается безопасной связью между браузером и сервером. От HTTP он отличается:

  • По умолчанию работает на порту 443.
  • Шифрует все заголовки вашего запроса / ответа, кроме IP-адреса запроса.

Имя хоста:

Просто IP-адрес с лучшим именованием.

Путь:

Путь URL-адреса такой же, как и путь к вашему каталогу. Он позволяет пользователям и поисковым системам понять, в каком разделе они сейчас находятся, например о разделе «/ о». Действительно, эта часть важна для лучшей оптимизации SEO.

Параметры запроса:

Он используется для отправки данных на сервер. Обычно это используется в маркетинговых целях, чтобы узнать, как обстоят дела с рекламой. Начинается с ?, данные разделяются с &

Примечание: не рекомендуется отправлять данные с параметрами запроса из соображений безопасности (тогда это могут видеть все), а также имеет ограничение на количество символов. (не допускается после 2048 символов).

Используя протоколы HTTP и HTTPS, мы можем отправлять данные на сервер и другими способами.

Запрос и ответ

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

Примечание. Когда вы отправляете запрос с помощью терминала (например, при запуске node index.js), процесс остается таким же. Чтобы отправить запрос на сервер, вам не обязательно нужен браузер, вы также можете сделать это с помощью своего терминала. Однако, если ответ - HTML, терминал ничего не сделает, поскольку HTML - это инструкции только для браузеров.

Заголовки

И браузеру, и серверу необходимо знать множество информации друг о друге, чтобы узнавать друг друга и, в конечном итоге, отправлять запросы или ответы. Такие как IP-адреса, Content-Type, Cookie, Cache-Control и многие другие. Вы можете найти полный список здесь. И они несут эти данные с заголовками, которые представляют собой просто пары "ключ-значение".

При отправке запроса вы можете задать только два заголовка вручную: Content-Type и Authorization. Хотя вы можете установить другие заголовки, они обычно обрабатываются браузером автоматически.

Content-Type - когда вы отправляете данные на сервер с телом (запросы POST, PATCH, PUT), вам необходимо указать его тип контента, будь то application/json, text/html , image/gif или video/mpeg.

Авторизация - используется сервером для идентификации пользователя. В отличие от заголовка cookie, этот заголовок должен быть установлен вручную разработчиком при отправке запроса. Обычно используется для запросов API и аутентификации JWT.

Запрос

Каждый запрос, отправляемый через Интернет, состоит из 2 обязательных 1 необязательной части.

  1. Строка запроса; состоят из метода запроса (GET, POST, DELETE и т. д.) и пути (извлеченного из URL)
  2. Заголовки, краткое описание которых приведено выше.
  3. Body (необязательно): когда вы выполняете запросы POST, PUT, PATCH для выполнения сервера, вам необходимо отправить тело, которое сообщает серверу, какие данные вы хотите отправить. Пример:
axios.post(‘/users’, 
{id: “5fddfefc4fbd19494493cd71”, name: "username"} // this part is body
).then(console.log)
  • axios - это библиотека, отправляющая запросы. Браузер также предоставляет вам функцию под названием fetch, которая позволяет отправлять запросы. Также существует устаревшая библиотека запросов для отправки запросов.
  • post - это метод запроса, означающий, что мы отправляем информацию на сервер. Подробнее о методах HTTP-запросов можно узнать здесь.
  • ‘/ users’ - это путь, указывающий, куда именно вы отправляете этот запрос на сервере. Эта часть URL-адреса на самом деле называется API. Когда API следует шаблону REST, он становится REST API, что позволяет разработчикам быстро понять и использовать API. Например, согласно шаблону REST, путь всегда должен быть во множественном числе.

REST означает «передача репрезентативного состояния» и представляет собой набор принципов проектирования, позволяющих вам использовать и изменять ресурсы на серверах с помощью API.

  • body - это сам объект данных, поэтому сервер может получить эти данные.

Как видите, помимо ввода имени домена в браузерах есть способы отправить запрос на сервер.

AJAX: отправка запроса из браузера. Если кто-то говорит вам, что знает ajax, это означает, что он знает, как отправлять запросы из браузера.

Метод опций и совместное использование ресурсов между источниками (CORS)

Запросы OPTIONS называются предполетными запросами.

В настоящее время вы видите ответ с сервера medium.com. Допустим, я написал код JS, который отправляет запрос POST на мой собственный веб-сайт, пока вы его просматриваете. Это называется междоменный запрос.

Междоменные запросы: запросы, которые отправляются на URL-адрес, имя хоста которого отличается от текущего URL-адреса.

С моим кодом JS я хочу, чтобы браузер отправил еще один запрос в другой домен (другой сервер). Однако это не так просто. По соображениям безопасности браузеры ограничивают HTTP-запросы из разных источников, инициируемые скриптами.

Определенные междоменные запросы, в частности запросы Ajax, по умолчанию запрещены политикой безопасности одного источника, в то время как запросы одного источника разрешены всегда.

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

Совместное использование ресурсов между источниками (CORS) - это механизм на основе HTTP-заголовка, который позволяет серверу указывать любой другой источник (домен, схему или порт), кроме своего собственного, из которого браузер должен разрешать загрузку ресурсов.

Итак, я отправил запрос на другое происхождение. Что происходит сейчас?

Браузер замечает, что домен отличается, поэтому он отправляет на этот сервер запрос OPTIONS, чтобы проверить, разрешен ли запрос. Это не имеет ничего общего с разработчиком, это выполняется автоматически браузером. Но разработчик, прежде чем отправлять запрос на другой источник, может добавить в запрос несколько заголовков, которые могут помочь в разрешении.

Как и другие запросы браузера, некоторые данные в заголовках, например Access-Control-Request-Method, Access-Control-Request-Headers headers, отправляются с помощью метода OPTIONS, который дает некоторую информацию, например, когда приходит настоящий запрос, каков тип данных, каков метод запроса и т. Д.

Теперь сервер может ответить, примет ли он запрос в этих обстоятельствах. Остальная история зависит только от сервера. В ответ сервер может отправить в ответ заголовок Access-Control-Allow-Origin с Access-Control-Allow-Origin: *, что означает, что к ресурсу может получить доступ любой домен.

Хотя он разрешает запросы GET из других доменов, он может ограничивать запросы POST.

Некоторые важные заголовки ответов для междоменных запросов

Access-Control-Allow-Origin - содержит имя хоста, которому разрешено отправлять междоменный запрос. Если это не соответствует имени хоста сайта, на котором находится пользователь, то междоменный переход отклоняется.

Access-Control-Allow-Credentials - если это верно в заголовке ответа, то междоменный запрос будет включать заголовок cookie.

Access-Control-Allow-Methods - это разделенная запятыми строка, которая сообщает браузеру, какие методы запроса разрешены в междоменном запросе. Запрос не будет отправлен, если метод запроса не включен в этот заголовок ответа.

Один из кодов Node.js для установки заголовков;

router.options('/api/*', (req, res) => {
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Origin', req.headers.origin)
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, PATCH, DELETE')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Credentials'
  )
  res.send('ok')
})

Зачем это нужно знать разработчикам серверов

Стандарт CORS означает, что разработчики серверов должны обрабатывать новые заголовки запросов и ответов. Им нужно рисовать линии заголовками, чтобы предотвратить ошибки безопасности.

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

Ваше здоровье!