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

Ошибка появляется в консоли, когда ты пытаешься обратиться с одного URL на другой. Клиент и сервер обмениваются заголовками, твой браузер не видит заголовков CORS и блокирует действие.

У новичков чаще всего происходит при использовании метода fetch для обращения к стороннему API. Например, ты хочешь обратиться к бесплатному API с прогнозом погоды и забрать у него актуальные данные. Ошибка может возникать и когда вставляешь в теги <img>, <video> и другие контент из внешнего источника, а не из директории проекта — но здесь сосредоточимся на fetch.

Предположим, полный адрес твоей локальной среды разработки в строке браузера выглядит как “http://localhost:3000” или “http://localhost:5500”. Ты хочешь обратиться через fetch к “https://super-api.net”. У вас не совпадают хосты (localhost и super-api.net), протоколы (http и https) и порты (http на 80, https на 443). Комбо: как раз все три причины, почему CORS может быть недоволен твоим запросом.

Самое простое решение проблемы для fetch — передать в параметрах метода заголовок запроса Access-Allow-Control-Origin: *. Таким образом ты разрешаешь все запросы. Но «звёздочку» желательно использовать только в учебных целях. С оговорками она подходит и если ты просто получаешь данные, твоё приложение не требует аутентификации или авторизации, источник доверенный (рабочий или учебный сервер).

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

У новичков часто возникают ситуации, когда в конце или в середине проекта приходится всё переписывать заново 😰

Но это нормально — пока ты учишься, кривой код неизбежен. Наверняка на предыдущей работе у тебя тоже не всё получалось сразу 🤷‍♂️ Не падай духом и не ленись улучшать свои веб-приложения, даже если для этого придётся начинать практически с нуля.

Когда твой проект лежит на GitHub или подобной платформе — не перезаливай новую версию отдельно, а подробно опиши изменения в коммитах. Это займёт больше времени, зато ты покажешь своё умение работать над ошибками. Работодатели любят, когда можно посмотреть прогресс разработчика наглядно, чтобы понять, какой код ты писал раньше и как прокачался с тех пор 💪

Привет! 👋 Лето близко, но наверняка ты задумываешься, как провести его с пользой 💪 У тебя ещё есть время, чтобы попасть на один из наших курсов и стать фронтенд-разработчиком 🤓

👉 13 июня стартует следующий поток буткемпа. Это интенсивный трёхмесячный курс, где ты занимаешься каждый день — в школе в центре Петербурга или онлайн из любого удобного места. Записывайся — https://saintcode.ru/?utm_source=telegram_direct&utm_medium=post&utm_campaign=organic_social&utm_content=lastcalljune2023

👉 15 июня стартует первый поток вечернего онлайн-курса. Это новый продукт: за основу мы взяли программу буткемпа, только идёт этот курс 9 месяцев. Здесь ты учишься онлайн и можешь стать веб-разработчиком, продолжая работать на основной работе. Записывайся — https://saintcode.ru/eveningcourse/?utm_source=telegram_direct&utm_medium=post&utm_campaign=organic_social&utm_content=lastcalljune2023

Помнишь, как работает оператор typeof в JavaScript?

Давай проверим — укажи, какое значение вернётся в консоль, если мы запустим этот код 👩‍💻

Люди интересуются буткемпом и спрашивают: «А гарантируете ли вы трудоустройство?». Мы отвечаем: нет, не гарантируем.

Более того — компании, которые дают такие обещания, бросают слова на ветер 👎

Первая проблема в том, что никто не может отвечать за результат твоего обучения. Все приходят с разным бэкграундом, с разной мотивацией и обучаются тоже по-разному. Кто-то выполняет только основные задания и идёт отдыхать, а кто-то подхватывает нашу одержимость программированием и кодит буквально 24/7. Как думаешь, у кого больше шансов найти работу?

Вторая проблема в том, что гарантии хорошо работают для закрытия сделки, а на практике обещания не выполняются. Конечно, легче выложить круглую сумму за курс, когда говорят, что ты покроешь расходы за пару месяцев — или тебе вернут деньги. В итоге оказывается, что такого пункта в договоре не было (или он внезапно исчез), либо нужно отправлять по 100 откликов в месяц в течение полугода. Где бы ещё взять столько джуновских вакансий 😉

Так что гарантии трудоустройства — это миф. Вот как мы помогаем приблизиться к первой работе в IT:

👌 Не завышаем ожидания. Работу найти непросто, после курса наши выпускники тратят в среднем по 2–3 месяца, чтобы устроиться. Зарплаты совсем ещё зелёных джунов от 100 тыс. — большая редкость, на начальном этапе нужно работать ради опыта, с оплатой в районе 40–60 тыс. руб.

👌 Помогаем после окончания курса. Да, целая неделя программы посвящена карьерной подготовке: поиску вакансий, написанию резюме и сопроводительных писем, прохождению собесов. Но ты можешь обратиться за советом и после выпуска, а некоторых сильных студентов мы рекомендуем дружественным компаниям, если они ищут джунов.

👌 Даём возможность выполнить первый коммерческий проект. У нас есть веб-студия при школе, где новички решают реальные задачи под присмотром более опытных разрабов и получают первые деньги за код. Опять же, всех мы взять не можем — надо проявить себя во время обучения.

Хочешь, чтобы всё было прозрачно и без уловок? Оставь заявку и стань программистом вместе с SaintCode Bootcamp — https://saintcode.ru/?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=noguarantee 💚

Освежим знания о разметке HTML? 👨‍🏫

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

Только начинаешь смотреть в сторону первого языка программирования? 👀

Попробуй JavaScript — он довольно дружелюбный к новичкам, с сильным сообществом и множеством бесплатных материалов для изучения 🔥

Один из таких бесплатных продуктов — подготовительная программа SaintCode Bootcamp, которая плавно погрузит тебя в основы JS. Она рассчитана примерно на 20 часов времени и написана опытным практикующим программистом.

Главное отличие нашей программы в том, что ты не пытаешься сходу осваивать сложные концепции, а сразу начинаешь кодить в консоли браузера. Тебе даже не нужно знать вёрстку HTML/CSS — она при прохождении подготовительной программы не понадобится.

❗️Важно: мы рекомендуем проходить подготовку перед буткемпом, но на поступление это не влияет. Просто тебе будет гораздо легче учиться, когда ты уже что-то знаешь и умеешь.

Посмотреть подготовительную программу — https://saintcode.ru/podgotovitelnaya-programma-po-javanoscript ✅

Давай разберём базовые способы хранения данных в браузере — новички часто путаются в этих технологиях, а работодатели любят задавать вопрос про разницу между ними на интервью 🤓

👉 Запомни важный момент, который касается всех способов: Cookies, Local Storage и Session Storage хранят данные на стороне клиента в формате «ключ-значение» и оба этих параметра могут быть только строками.

👉 Ещё одна интересная деталь: локальное и сессионное хранилище относятся к встроенному в браузер API Web Storage — это просто два варианта его реализации.

Теперь по отдельности о каждом из них:

🔧 Куки хранятся в браузере и устанавливаются сервером через заголовок Set-Cookie. То есть клиент и сервер обмениваются заголовками и данные остаются с обеих сторон — это главное отличие технологии от локального и сессионного хранилища.

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

Срок хранения устанавливается вручную — это может быть одна конкретная сессия, неделя или месяц.

Ёмкость куки для одного домена небольшая — всего 4 КБ. Доступность не зависит от вкладки или окна.

🔧 Локальное хранилище может хранить данные только на стороне клиента, они никогда не попадут на сервер.

Local Storage используют, чтобы хранить результаты в браузерных играх или зафиксировать момент, на котором ты остановился при просмотре видео.

Формально у Local Storage нет срока хранения, но при переполнении современные браузеры сами очищают его.

Ёмкость локального хранилища довольно большая — 5 МБ. Доступность не зависит от вкладки или окна.

🔧 Сессионное хранилище тоже занимает до 5 МБ. Оно работает примерно так же, как и локальное — но только в пределах одной сессии и одной вкладки. То есть если ты закроешь вкладку или перезапустишь браузер, данные не сохранятся. Простой пример — это сохранённые поля в форме в рамках одной сессии пользователя.

На практике разработчики редко ограничиваются этими способами и тебе наверняка придётся освоить дополнительные технологии. Но пока ты учишься, достаточно знать про куки и хранилища и не путаться в них.

С чего начать, если собираешься в веб-программирование?

Давай обсудим 27 июня в 20:00 по МСК, на бесплатном вебинаре SaintCode Bootcamp. Точно стоит зайти, если ты:

🙇‍♀️ Хочешь работать над веб-приложениями, но пока не знаешь с чего начать — смотришь в сторону фронтенда, бэкенда или тестирования.

🙇‍♂️ Не понимаешь, реально ли новичку найти работу в 2023 году и хочешь знать, какие именно технологии во фронтенде помогут устроиться.

🙇‍♀️ Ищешь подходящее место, чтобы научиться кодить и найти единомышленников.

Вебинар проведёт Женя Гриценко, основатель школы и карьерный консультант. В гостях — выпускники 2023 года Игорь Карпов и Артём Егоров. Оба уже вышли на рынок труда: Игорь устроился джуниор-фронтендером в Oaziz DAO, а Артём стажируется на фронтенд-разработчика в Golden Carrot 💪

🫶 Всем зарегистрированным участникам после вебинара подарим дорожную карту для самостоятельного изучения фронтенд-разработки.

Регистрируйся здесь — https://saintcode.ru/webinar_one?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=webinar2706 ⚡️