CORS error demo

CORS error demo with async fetch api example

by Vallek

HTML

<button class="get-data">Get data</button>
<div class="area"></div>

CSS

button{
	display: block;
	width: 300px;
	height: 50px;
	background-color: rgb(224, 129, 19);
	color: #fff;
}

.area {
	display: block;
	width: 50%;
	min-height: 500px;
	border: 3px solid grey;
}

JavaScript

/* Код используется для демонстрации работы CORS. В процессе демонстрации ссылка меняется на не api ('https://github.com/Vallek/') для вывода ошибки CORS. А также на неверную ссылку для 404 ошибки. */
const button = document.querySelector('.get-data');
const area = document.querySelector('.area');

button.addEventListener('click', fetchF);

// Для работы Fetch API мы используем асинхронную функцию
async function fetchF() {
	// Успешный запрос вернет объект Response, а неуспешный ошибку. await необходим ожидание ответа от сервера
	const response = await fetch('https://api.github.com/users/Vallek/followers');
	// Если ответ успешен, то 
	if (response.ok) {
		// берем json данные из объекта
		const json = await response.json();
		// Для каждого юзера выводим логин и id, создаем пустой параграф и помещаем туда данные
		json.forEach(el => {
			const login = el.login;
			const id = el.id;
			const textP = document.createElement('p');
			textP.textContent += ' ' + login + ' ' + id;
			area.appendChild(textP);
		});
	// А если получаем ошибку, то вставляем в див ее текст 
	} else {
		area.textContent = "HTTP-Error: " + response.status;
	}
}