👉

@frontend_mind

‍CORS для собеседований и работы

Если вы видите эту ошибку — вы не одиноки:
Access to fetch at 'https://api.site.com' from origin 'http://localhost:3000' has been blocked by CORS policy.

Разберем, почему это происходит, и как это починить. Что такое CORS, и для чего он нужен.

CORS (Cross-Origin Resource Sharing) - русского обозначения не имеет. Дословно "межисточниковый" обмен ресурсами.

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

Как работает:
- Браузер выполняет вызов ресурса.
- Получает заголовки Access-Control.
- Проверяет разрешенные заголовки на соответствие домена и запроса.
- Блокирует или разрешает чтение результата запроса.

Пример: пользователь открывает сайт evil.com. Если bank.com настроил CORS, JavaScript на evil.com не сможет прочитать ответ от bank.com/api/account.

CORS не защищает от кросс-доменных запросов (CSRF-атак). Браузер проверяет заголовки после получения ответа, блокируя передачу ответа в js код.

Заголовки CORS
# Разрешённые домены (один, список или *)
Access-Control-Allow-Origin: https://frontend.com

# Разрешённые HTTP-методы (список или *)
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE

# Разрешённые заголовки для отправки(предварительный запрос)
Access-Control-Allow-Headers: Authorization, Content-Type, X-Requested-With

# Разрешённые для чтения заголовки (основной запрос)
Access-Control-Expose-Headers: Authorization, Content-Type, X-Requested-With

# Разрешить передачу кук/токенов
Access-Control-Allow-Credentials: true

# Кэшировать предварительный запрос на 600 сек (10 мин)
Access-Control-Max-Age: 600

Предзапросы (Preflight-запросы)
"Простые запросы" (GET, POST, HEAD без спец. заголовков) отправляются сразу.

"Сложные запросы", например, с методами PUT, DELETE или с нестандартными заголовками, сначала отправляют "предзапрос" (preflight request) методом OPTIONS.

Сервер должен ответить, разрешены ли такие запросы.

Например, перед вызовом GET с заголовком X-API-Key будет выполнен запрос:

http

/data HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Headers: X-API-Key

Сервер должен ответить:

http

HTTP/1.1 204 OK
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Headers: X-API-Key

И только потом отправится основной запрос.

Лучшие практики CORS
1.Не используйте * для защищенных данных

Разрешайте только доверенные домены:
Access-Control-Allow-Origin: https://your-frontend.com

2.Для публичных API можно использовать *:

Access-Control-Allow-Origin: *

3.Куки = осторожно!

Если используете куки:
http

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://frontend.com // Нельзя использовать *

4.Тестируйте предзапросы:

Для PUT, DELETE и запросов с Authorization всегда настраивайте обработку OPTIONS.

- Используйте Access-Control-Max-Age чтобы снизить нагрузку
- Настройте веб-сервер (Nginx/Apache) для оптимизации, обработки OPTIONS без запуска приложения

👉

@frontend_mind

Angular Signals + RxJS: объединяем два реактивных мира в одном стейт-менеджере

Angular долгое время ассоциировался с RxJS. Даже слишком: многие разработчики ощущали, что без Observable ничего не работает. Но вот в Angular 17 появляются Signals — синхронная реактивность прямо из коробки. В 17+ — они становятся мейнстримом. Возникает вопрос: а что делать с RxJS? Выбрасывать?

Signals и RxJS — не конкуренты, а два мощных инструмента для решения разных задач. И если их правильно сочетать, можно построить удобную, масштабируемую и эффективную архитектуру

В этой статье мы:
- Разберёмся в различиях между Signals и RxJS
- Покажем, когда использовать что
- Сделаем свой собственный state-manager с красивым API
- И покажем, как всё это выглядит в реальном Angular-приложении

👉

@frontend_mind

Вписался как родной

👉

@frontend_mind

Что такое mutations и actions в vuex?

Который является официальной библиотекой для управления состоянием в приложениях Vue.js, mutations (мутации) и actions (действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения.

Mutations (Мутации)
Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
incrementBy(state, payload) {
state.count += payload.amount;
}
}
});

Actions (Действия)
Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода dispatch и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
incrementByAsync({ commit }, payload) {
setTimeout(() => {
commit('incrementBy', payload);
}, 1000);
}
}
});

Взаимодействие между Mutations и Actions:

Mutations
Синхронно изменяют состояние.
Actions
Могут быть асинхронными и обычно вызывают мутации для изменения состояния.

Пример взаимодействия
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, message) {
state.message = message;
}
},
actions: {
fetchMessage({ commit }) {
setTimeout(() => {
const message = 'Hello from async action!';
commit('setMessage', message);
}, 2000);
}
}
});

Компонент


{{ message }}
Load Message




import { mapState, mapActions } from 'vuex';

export default {
computed: {
...mapState(['message'])
},
methods: {
...mapActions(['fetchMessage']),
loadMessage() {
this.fetchMessage();
}
}
};


👉

@frontend_mind

Web Design in easy steps, 7th Edition (2023)

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

👉

@frontend_mind

Break camelCase

Завершите решение так, чтобы функция разбивала camelCase пробелом.

Пример:
"camelCasing" => "camel Casing"
"identifier" => "identifier"
"" => ""

👉

@frontend_mind