HTML - Веб CORS: Пособие для начинающих

Здравствуйте, начинающие веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир CORS. Не волнуйтесь, если вы никогда раньше не слышали о нем - к концу этого руководства вы将成为 экспертом по CORS! Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

HTML - Web CORS

Что такое CORS?

CORS означает Cross-Origin Resource Sharing (перекрестное compartir ресурсов). Я знаю, что это звучит как-то сложно, но позвольте мне объяснить это с помощью забавной аналогии.

Представьте, что вы находитесь в элегантном ресторане (это ваш веб-браузер) и хотите заказать еду из ресторана напротив (это другой веб-сайт). Обычно элегантный ресторан не разрешит это, потому что они хотят, чтобы вы ели их еду. Но с CORS это как если бы элегантный ресторан сказал: "Конечно, заказывайте из ресторана напротив!" Это способ для веб-браузеров безопасно разрешать веб-сайтам запрашивать ресурсы с других веб-сайтов.

Почему нам нужен CORS?

Вearly days веба, браузеры имели строгую политику безопасности под названием Same-Origin Policy (политика одного источника). Эта политика предотвращала веб-сайты от выполнения запросов к другим доменам, что было很好 для безопасности, но не так хорошо для функциональности.

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

Как работает CORS?

CORS работает через��列 HTTP заголовков. Когда веб-страница выполняет запрос к другому домену, браузер добавляет особый заголовок Origin к запросу. Затем сервер отвечает заголовками, которые告诉 браузеру, разрешен ли запрос.

Давайте рассмотрим простой пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример CORS</title>
</head>
<body>
<h1>CORS в действии</h1>
<button onclick="makeRequest()">Создать запрос</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

В этом примере, когда вы нажимаете кнопку, она пытается получить данные из https://api.example.com/data. Если сервер на api.example.com настроен правильно, он включит заголовки в свой ответ, которые позволят вашей веб-странице получить доступ к данным.

Выполнение запроса CORS

Теперь давайте углубимся в то, как выполнять запрос CORS. Мы будем использовать Fetch API, который является современным и мощным способом выполнения сетевых запросов в JavaScript.

fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Этот код отправляет GET запрос на https://api.example.com/data. Ответ сервера определит, был ли запрос успешным или нет.

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

Access to fetch at 'https://api.example.com/data' from origin 'http://yourwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Не паникуйте, если видите эту ошибку! Это просто означает, что сервер не настроен для разрешения запросов с вашего веб-сайта.

Обработчики событий в CORS

Работая с CORS, важно обрабатывать как успешные ответы, так и ошибки. Давайте изменим наш предыдущий пример, чтобы включить обработчики событий:

<!DOCTYPE html>
<html>
<head>
<title>CORS с обработчиками событий</title>
</head>
<body>
<h1>CORS с обработчиками событий</h1>
<button onclick="makeRequest()">Создать запрос</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'Произошла ошибка: ' + error.message;
});
}
</script>
</body>
</html>

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

Методы CORS

CORS поддерживает различные HTTP методы. Вот таблица, резюмирующая最常见的 из них:

Метод	Описание
GET	Получает данные с сервера
POST	Отправляет данные на сервер для создания нового ресурса
PUT	Отправляет данные для обновления существующего ресурса на сервере
DELETE	Запрашивает удаление ресурса на сервере
HEAD	Подобно GET, но получает только заголовки, а не тело
OPTIONS	Используется для описания коммуникационных опций для целевого ресурса

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

Заключение

Поздравляю! Вы только что сделали первые шаги в мир CORS. Мы рассмотрели, что такое CORS, почему он необходим и как выполнять базовые запросы CORS. Помните, CORS - это все о том, чтобы сделать веб более взаимосвязанным, сохраняя при этом безопасность.

По мере продолжения вашего пути в веб-разработке, вы встретите CORS в множестве различных ситуаций. Не бойтесь ошибок CORS - это просто возможности узнать больше о том, как работает веб!

Продолжайте практиковаться, stay curious, и счастливого кодирования!

Credits: Image by storyset