Автор оригинала: Arbaz Siddiqui.
Ссылка на сайт Слишком оригинальная статья.
Вступление
Если вы когда-либо работали на некоторых вызовах AJAX или AGRAID SPA, вы можете быть знакомы с раздражающей ошибкой CORS. Перейдите к решению для нас в этом случае – это поговорить с ребятами Backens и попросите их просто позволить все, потому что Йоло. Но что такое CORS? Это просто способ раздражать разработчиков Frontend? Есть ли что-то связано с безопасностью? Если да, то зачем нам нужны аутентические и секретные ключи? Если нет, то какую цель это решает? Как это работает в первую очередь?
Если у вас есть эти вопросы, эта статья для вас. Он попытается ответить на все это, а также предложить решение для проблем, которые вы могли бы справиться с CORS.
Что такое CORS?
Чтобы понять, какие CORS (общий ресурс по перекрестному происхождению) – сначала мы должны понять, что Та же политика происхождения (SOP) есть. SOP – это мера безопасности, реализованная всем современным браузером, которое запрещает сценарии и ресурсы, загруженные из одного Происхождение взаимодействовать с другим Происхождение Отказ Другими словами, если ваш сайт размещен с использованием www.example.com Тогда вы не можете сделать XHR-запросы www.test.com Отказ Как это помогает? Рассмотрим сценарий, где вы уже вошли в Facebook, и вы открываете вредоносную веб-сайт. Этот веб-сайт может сделать запросы на Facebook и извлечь личную информацию от вашего вошедшего заседания. Чтобы предотвратить это, SOP реализован в браузерах. SOP не ограничивает доступ к серверам Мы используем механизмы, такие как ключи API и секретный ключ для этого. На самом деле сервер не знает об этом, и вы можете сделать тот же запрос, используя Curl или Postman, и все будет работать.
Если SOP является способом ограничения доступа к перекрестному происхождению, CORS – это способ обойти, что и позволяет вашему интерфейсу сделать запросы на легит на сервер. Если ваш клиент размещен в другом источнике, то ваш сервер, ваш клиент не сможет сделать запросы XHR на свой сервер из-за SOP. CORS позволяет нам сделать это в обеспеченном и управляемом порядке.
Согласно веб-документам MDN:
Распределение ресурсов по перекрестным происхождениям (CORS) – это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузерам, чтобы получить веб-приложение, запущенную в одном начале происхождения, доступ к выбранным ресурсам из другого происхождения.
Что такое происхождение?
Мы уже использовали термин Происхождение свободно и будет продолжать делать это для остальной части статьи. Так что это приятно знать тонкости, связанные с происхождением. Происхождение изготовлено из трех частей: схема (протокола), хоста (домен) и порт. Говорят, что два происхождения одинаковы, если все три из этих компонентов равны. Они разные, если какой-либо из одного из этих компонентов отличается. Например http://example.com/app1/index.html . и http://example.com/app2/index.html То же самое происхождение, так что http://example.com:80 и http://example.com (Порт по умолчанию для HTTP составляет 80). Но http://example.com/app1 и https://example.com/app2 Различные происхождения, поскольку протокол отличается. Точно так же http://example.com и http://www.example.com разные происхождения как домен отличается.
Как работает CORS?
Спецификация CORS позволяет серверу отправлять некоторые заголовки в ответ, какой клиент понимает и на основе этих заголовков браузера может принять решение, если они хотят служить запросу или нет. Есть несколько таких заголовков, но главный это Access-Control-Allow-light Отказ Значение этого заголовка может быть * Это означает, что сервер настроен, чтобы позволить каждому получить доступ к ресурсам. Или это может быть конкретное происхождение, которое он позволил:
Access-Control-Allow-Origin: https://example.com
Существует два типа запроса CORS: «Простые» запросы и «предварительные» запросы, и это браузер, который определяет, который используется. Будучи разработчиком, вам не нужно делать это различие, однако это хорошо, знают, как эти две типы функционируют для отладки.
Простые запросы:
Запрос API считается простым запросом, если он соответствует всем следующим критериям:
- Метод API – один из них: получить, пост или голову.
Content-TypeЗаголовок имеет один эти значения:Приложение/X-WWW-Form-urlencoded,Мультипартные/формы-данные,Текст/простые
Эти два составят большую часть случаев использования простых запросов, однако можно найти более подробный список здесь Отказ
Теперь, если ваши запросы на API считаются простой Браузер будет продолжать и сделать звонок на сервер, сервер ответит заголовками CORS. Браузер проверит на Access-Control-Allow-light заголовок в ответ и продолжайте соответственно.
Предварительные запросы на рейс:
Если ваш вызов API не удовлетворяет критериям быть простым запросом (наиболее распространенным является Content-Type Content Значение, являющееся Приложение/JSON ) Браузер сделает запрос перед отправкой фактического запроса. Этот запрос, который сделан, прежде чем сделать фактический запрос, называется предварительно запрашиваемый запрос Отказ Запрос перед полетом будет содержать всю информацию о фактическом запросе и будет сделана с помощью метода Варианты Отказ Сервер ответит на этот прелест со всеми заголовками CORS для фактического вызова API и, таким образом, браузер узнает, что он может идти вперед и сделать фактический вызов API или нет.
Позволяет привести пример, мы пытаемся сделать Получить Призыв к https://example.com/status Отказ Content-Type это Приложение/JSON И, таким образом, браузер не соответствует этому как простой запрос. Отсюда браузер сделает запрос перед полетом, прежде чем сделать этот запрос:
curl --location --request OPTIONS 'http://example.com/status' \ --header 'Access-Control-Request-Method: GET' \ --header 'Access-Control-Request-Headers: Content-Type, Accept' \ --header 'Origin: http://test.com'
Это сервер сообщений браузера, который я собираюсь позвонить с Получить Метод, Content-Type и Принять Как заголовки и от происхождения https://test.com Отказ Сервер ответит на этот запрос как:
HTTP/1.1 204 No Content Access-Control-Allow-Origin: * Access-Control-Allow-Methods: OPTIONS, GET, HEAD, POST Access-Control-Allow-Headers: Content-Type, Accept
Access-Control-Allow-light: Происхождение, которое разрешено сделать запрос или*Если запрос может быть сделан из любого происхождения.Доступ-контроль-разрешение - методы: Разделенный запятыми список HTTP-методов, которые разрешены.Доступ-контроль-разрешение-заголовки: Разделенный запятыми список пользовательских заголовков, которые могут быть отправлены.
Браузер будет интерпретировать это и проверить, можно ли сделать наш вызов статуса. В нашем примере сервер ответил * Для происхождения, таким образом, теперь браузер сделает https://example.com/status вызов. Если происхождение от ответного ответа будет приходить что-то вроде Access-Control-Allow-Origin: http://domain.com мы бы столкнулись с Запрос с перекрестным происхождением заблокирован ошибка.
Работа с ошибками CORS
Теперь мы знаем, что такое CORS и как это работает. Сверху можно отметить, что полный контроль над CORS лежит на сервере I.E. Сервер может разрешить и запретить происхождение. Так как мы можем исправить проблему, которая всплывает, когда у нас нет доступа к серверу? Давайте посмотрим на эти сценарии один за другим.
CORS при разработке серверов
Если вы строите сервер и хотите обслуживать некоторых клиентов, просто убедитесь, что вы разрешите всем, что ваши клиенты будут делать запросы. Вы можете отправить только один Происхождение в ответ, но вы можете поддерживать белый список происхождений на вашем сервере и отправить обратно запрошенное начало в заголовке. Вот способ сделать это в узле:
app.use(function(req, res, next) {
const allowedOrigins = ['http://127.0.0.1:8020', 'http://localhost:8020', 'http://127.0.0.1:9000', 'http://localhost:9000'];
const origin = req.headers.origin;
if(allowedOrigins.indexOf(origin) > -1){
res.setHeader('Access-Control-Allow-Origin', origin);
}
res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', true);
return next();
});
Если вам нравится жить на краю, вы можете пойти дальше и позволить всем истокам сделать запросы на ваш сервер, используя Access-Control-Allow-Origin: * Отказ
CORS при разработке клиентов
Это тот случай, когда у вас нет контроля над серверами, то есть вы делаете третий звонок и не могу связаться с разработчиками, чтобы добавить свое начало. Это сложная ситуация, когда вы не сможете сделать какие-либо XHR-запросы на эту третью сторону. В этом случае вы можете изменить сам сервер I.E. Вы создаете прокси-сервер, который позволяет вашему происхождению, а затем прокси-сервер сделает третий вызов. Как уже упоминалось перед серверами, не понимают SOP и, следовательно, прокси-сервер может позвонить на сторонний сервер без каких-либо проблем, как и любой другой клиент, такой как почтальон. Все, что вам нужно сделать, это создать прокси-сервер и отправить правильные заголовки CORS с этого прокси-сервера. Есть готовые решения для этого использования, как ядро-в любом месте Отказ
Заключение
Мы узнали о том, что такое SOP и как CORS используется для обогащения ограничений, наложенных SOS. Мы также смотрели по-разному, что API имеет дело для CORS по браузеру и разным заголовкам, которые поставляются с ним. Наконец мы смотрели на сценарии и решения для решения Запрос с перекрестным происхождением заблокирован Ошибка при разработке приложений.
Как этот пост? Вы можете найти больше в Twitter: @Arbazsiddiqui_ Или посетить мой Сайт Или присоединиться к рассылка Спасибо за прочтение!