CORS - Cross Origin Resource Sharing, Совместное использование ресурсов между разными источниками

Ғылым және технология

Мы полностью разберемся в вопросах CORS и вы сможете понимать что же требуется браузеру, рассмотрим реальные примеры.
Поддержи канал материально: donatepay.ru/don/kuvshinovee
Канал: t.me/KuvshinovEvgeniy
Наш чат: t.me/dev_ru
Итоговый middleware для Laravel: gist.github.com/smpl/b24db71f...
00:00 - Вступление
00:07 - План видео
00:50 - Пример CORS
06:48 - Origin и Access-Control-Allow-Origin
10:38 - Access-Control-Allow-Credentials
12:57 - "Непростые" CORS запросы
13:16 - Access-Control-Request-Method и Access-Control-Allow-Methods
16:29 - Access-Control-Request-Headers и Access-Control-Allow-Headers
21:30 - Access-Control-Max-Age
24:22 - Access-Control-Expose-Headers
26:15 - Мой опыт
39:55 - Если вам понравилось видео
#CORS

Пікірлер: 81

  • @mrzlanx5328
    @mrzlanx53283 жыл бұрын

    За потраченное время автору уважение и большое спасибо.

  • @mrECMAScript
    @mrECMAScript3 жыл бұрын

    Для меня, как новичка в области CORS - видео просто потрясающее) Спасибо!

  • @o_opedro4044
    @o_opedro40443 жыл бұрын

    Спасибо, все сжато, и по делу... 👍

  • @winstonwolf2981
    @winstonwolf29813 жыл бұрын

    Подача материала, примеры, изложение, все на уровне. Благодарность выражаю.

  • @lollolich2399
    @lollolich23993 жыл бұрын

    Супер, отличное видео, то что я искал! Читал официальную докумментацию, было как-то трудно её воспринимать, в вашем видео всё наглядно и понятно, спасибо за годный контентыч

  • @MrPahan252
    @MrPahan252 Жыл бұрын

    Евгений, спасибо большое! Это самый наглядный материал по этой теме который я только встречал

  • @user-ou7bp4ze8t
    @user-ou7bp4ze8t9 ай бұрын

    За вчера и за сегодня пересмотрел тонну видосов на эту тему. Только этот помог по настоящему разобраться в теме и решить проблему. Сегодня я нашел ответы на те вопросы, которые даже не знал как гуглить. Константин, если читаете, огромное вам спасибо. Ни в коем случае не забрасывайте канал.

  • @user-zb9qy9yc4b

    @user-zb9qy9yc4b

    6 ай бұрын

    он же вроде Евгений "валуе" Кувшинов😁

  • @user-mw2vs4wi7i
    @user-mw2vs4wi7i2 жыл бұрын

    Автор, огромнейшее спасибо за видео - мало того что разложил все по полочкам, но еще и написал middleware, который можно использовать. Респект

  • @dogober3861
    @dogober3861 Жыл бұрын

    Спасибо огромнейшее!!!! Дико выручил и шикарно объяснил🤩

  • @ant1k-1
    @ant1k-124 күн бұрын

    хорошее видео без воды, спасибо

  • @dmytrolemesh6458
    @dmytrolemesh64582 жыл бұрын

    Огромная благодарность автору видео. Ваше время не было потрачено зря!

  • @user-vv6jx8qg4v
    @user-vv6jx8qg4v3 жыл бұрын

    Молодец!, очень просто и классно все рассказал!

  • @user-zh5sf4dw5j
    @user-zh5sf4dw5j3 жыл бұрын

    Спасибо за контент, подкрепил знания

  • @alexpanov4678
    @alexpanov46783 жыл бұрын

    Мне бы это видео лет 6 назад... Эх, столько бы «боли» прошло мимо)) Спасибо, отличный выпуск.

  • @MrFallout1988
    @MrFallout19882 жыл бұрын

    очень классное объяснение, спасибо автору!

  • @user-xz4ko6dk5p
    @user-xz4ko6dk5p3 жыл бұрын

    Отличное видео! Странно, что там мало лайков и просмотров. Автор большой молодец

  • @user-ck7rb1hg8o
    @user-ck7rb1hg8o3 жыл бұрын

    Спасибо, очень понятное объяснение и примеры хорошие. Единственное пожелание это улучшить произношение терминов на английском языке). Удачи в развитии.

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    учту, буду произносить нормально термины

  • @user-jf9ht3ge3x
    @user-jf9ht3ge3x2 жыл бұрын

    спасибо за видео . Очень понятно обьяснил

  • @user-oj3lm4ih7y
    @user-oj3lm4ih7y2 жыл бұрын

    Спасибо большое! Очень полезное видео!!!

  • @user-sy4fu7zb1c
    @user-sy4fu7zb1c2 жыл бұрын

    Очень круто. Спасибо!

  • @user-xg9wt3he9q
    @user-xg9wt3he9q2 жыл бұрын

    Полезная инфа, спасибо👍👍

  • @ulibkaify
    @ulibkaify3 жыл бұрын

    Огромное спасибо! CORS я использовал, но понимание самого механизма наступило только сейчас

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    спасибо за донат

  • @Sa1ahaddin
    @Sa1ahaddinАй бұрын

    Спасибо за видео, очень понравилось, что детально и с примерами ❤ Если еще произношение английских слов подтянете, вообще шикарно будет. А то Валуе вместо вэлью (value) чет режет уши))

  • @maksimmalakhov1229
    @maksimmalakhov1229 Жыл бұрын

    Очень хорошее объяснение темы

  • @tecs77
    @tecs77 Жыл бұрын

    Большое спасибо. Помог очень

  • @shumilus
    @shumilus2 жыл бұрын

    огромное спасибо автору. Самый полный и понятный материал который я смог для себя найти на просторах интернета на русском языке )

  • @MakarenkoSasha
    @MakarenkoSasha Жыл бұрын

    Все по делу. реально помог!

  • @Dendor3519
    @Dendor3519 Жыл бұрын

    Спасибо, очень полезно!!!

  • @liko8019
    @liko80192 жыл бұрын

    а еще htp, вот это действительно много нового узнал

  • @v-bro6954
    @v-bro69542 жыл бұрын

    Спасибо, большое

  • @Fragrus
    @FragrusАй бұрын

    Харош

  • @user-sb7yh6gz9m
    @user-sb7yh6gz9m Жыл бұрын

    Зачет

  • @user-qb7jg4hx5l
    @user-qb7jg4hx5l9 ай бұрын

    большое спасрбо

  • @AndrewLapteff
    @AndrewLapteff Жыл бұрын

    Грааль

  • @nikitachechet6510
    @nikitachechet65102 жыл бұрын

    top

  • @liko8019
    @liko80192 жыл бұрын

    htpp, хм.... интересный протокол, никогда не слышал😁

  • @Deemix1000
    @Deemix10003 жыл бұрын

    Супер видос! Очень полезно. Только еще замечу что в ларавел есть встроенный механизм coors. C 7 версии вроде.

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    да хотел об этом механизме рассказать но случайно показал как он устроен (он как раз через middleware работает)

  • @inbuckswetrust7357
    @inbuckswetrust7357 Жыл бұрын

    метод path ? не смотря на оговорки большое спасибо автору

  • @kondor198714
    @kondor198714 Жыл бұрын

    Привет подскажите пж, например на сайте, идет прямая трансляция, ну во всяком случае так должно быть) а можно определить, запись это, или трансляция? заранее спс

  • @grantorino3465
    @grantorino34658 ай бұрын

    Спасибо, видео очень полезное

  • @qqqq-kv1fo
    @qqqq-kv1fo3 жыл бұрын

    Можете еще по теме кэша сделать объемлющее видео ?? Такую тему раскусили , а ту и подавно смогёте .. И еще по бы по аутентификации )

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    по аутентификации и авторизации есть в планах, но позже

  • @mo_llya
    @mo_llya2 жыл бұрын

    Спасибо за видеоурок, у меня такая проблема, например если апи вернет ошибку, то тогда выведется cors errors,а если 200 все норм,как можно решить ?

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    скорей всего при ошибках не проставляются заголовки, отсюда и cors error

  • @yehorpolishchuk8877
    @yehorpolishchuk88773 жыл бұрын

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

  • @krava6733

    @krava6733

    2 жыл бұрын

    пиф паф

  • @qqqq-kv1fo
    @qqqq-kv1fo3 жыл бұрын

    Не пойму чем тогда 'HTTP_ORIGIN" отличается от * если у всех фронтов реквестов есть эти ориджины, то чем же тогда сужается диапазон допуска ? В чем отличие ?

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    HTTP_ORIGIN это в PHP в действительности он берет из запроса заголовок Origin который проставляет браузер поддерживающий cors.

  • @saudada8451
    @saudada84513 жыл бұрын

    а с помощью чего вы делали этот brainmap?

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    язык plantuml.com для шторма есть плагин визуализации.

  • @saudada8451

    @saudada8451

    3 жыл бұрын

    @@kuvshinovee спасибо

  • @anatoliiilescu839
    @anatoliiilescu8392 жыл бұрын

    Нужен курс по Laravel!!!!!

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

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

  • @konstantindigit2945
    @konstantindigit29452 жыл бұрын

    Добрый день, скажите пожалуйста а вы создавали куку на клиенте или на сервере-апи, к которому клиент-браузер обращается? Вообще как создавали куку? Дело в том я выставил все заголовки,настройки credentials в положительно и на сервере и в fetch на клиенте, создаю куку коде на сервере, прописывая там в php setcookie('name','value', time()+600)). Затем с клиента делаю fetch на адрес сервера-апи (там пара строк кода где указаны нужные заголовки и код создания куки вышеуказанный). И ничего не происходит. Кука так и не передается в заголовках запроса. Как именно создать куку чтобы она передавалась, где ее создавать в коде на сервере-апи, или в коде js на клиенте? Можете подробно описать механизм пожалуйста.

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    Я создавал куку на клиенте, в браузере или через консоль или через плагин для управления куками сайта (для сайта api.localhost:8000). я думаю у вас небольшое непонимание того как работают куки и рассказывать это в комментарии ну такое себе, попробуем. браузер при заходе на сайт по "url" определяет какие куки ему слать, например если ты заходишь на example.com то он собирает один список кук в запросе, когда ты с этого сайта делаешь запрос на api.example.com тут список кук может быть другим. Установка куки возможно только до того момента пока не стал отправлять html body. Дополнительно у кук есть еще такое понятие как secure и httponly (в твоем случае оба варианта false), еще не забывай о домене и path Если у тебя api.example.com устанавливает куку, то при заходе на example.com ты ее видеть не будешь, ты ее сможешь видеть если сделаешь http запрос на api.example.com (как я это сделал я открывал один сайт localhost:8080 а уже внутри него делал запрос на api.localhost:8000 и вот у второго запроса отправлялась куки только в том случае если я указывал credentials: 'include' и при этом api.localhost:8000 возвращало заголовок CORS РАЗРЕШАЮЩИЙ обращаться сюда с куками)

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    мой простой совет зайдите туда где должна устанавливаться кука запустите отладчик и посмотрите какие куки вам установлены, на какой срок, какой домен и path и после поробуйте обновить страницу чтобы убедиться что куки отсылаются. ну и как я говорил отправка http заголовков (cookie это http заголовок по сути) возможна только до момента отправки http body

  • @konstantindigit2945

    @konstantindigit2945

    2 жыл бұрын

    @@kuvshinovee Странно вчера ответил, два раза и комментарий так мой и не появился. На всякий случай уточню у вас еще раз. Спасибо за ответ! Вопрос как у вас межсайтовые куки работали без установленных атрибутов SameSite = None и Secure?

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    @@konstantindigit2945 да я видел текст в уведомление на почте, но не видел комментарий под видео, думал удалил автор за не актуальностью. По поводу как они работали SameSite надо проставлять в хроме и его производных начиная с 80 версии и только в случае если куки вы ставите в апихе. В виде куку я ставил через плагин для управления кусками в браузере(оно не требует установки атрибута, просто момент установки куки я не показывал) поэтому оно работало На тему SameSite у как возможно стоит сделать отдельное видео как и про работу с куками

  • @konstantindigit2945

    @konstantindigit2945

    2 жыл бұрын

    ​@@kuvshinovee Ну хорошо что уведомление о тесте видели, видимо ютуб не пропускает текст с кусками кода, хотя я даже экранировать их пытался....И даже видел что коммент остался, а потом захожу раз и нету. Если по теме: С samesite выходит огромная ж...чтобы протестировать взаимодействие своего локального сайта со своим локальным апи, когда локальному сайту нужно отсылать куку на локальный апи, то это можно сделать только по https, то есть на локалке нужно как то настроить https у обоих хостов локального сайта и апи. Или только у хоста апи...в общем если будет возможность пожалуйста сделайте видео насчет такого взаимодействия...я 4 дня ковырялся, мне нужно было отправить на апи с своего сайта куку приписанную не к апи, а к сайту, в которой находиться id сессии чтобы апи скушало id сессии из этой куки и выдало обработав этот id данные пользователя. Но как отправить куку на апи, если эта кука задается не самим апи, а сайтом и тут меня постиг крах. А потом еще и эти SameSite = None и Secure с его https....В общем сейчас стараюсь придумать чтобы id сессии передавался в заголовке authorization. Ну ладно это так история, может кто читать будет и на мои грабли не нарвется.

  • @qqqq-kv1fo
    @qqqq-kv1fo3 жыл бұрын

    Не пойму кто в опасности тогда без механизма корс ? клиент получается ? то есть кросссайт может получить данные моих куков для оридижна получается так ? Или наоборот якобы 8080 в потенциальной опасности что к нему лезу из 8000 ? - не пойму в чем для него тогда опсасность ..

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

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

  • @qqqq-kv1fo

    @qqqq-kv1fo

    3 жыл бұрын

    @@kuvshinovee Ааа , понятно )) Плохой сайт это сам ориджин - 8080 , а 8000 это типо "банк" . Вот гад такой !

  • @pauluslucceius7486
    @pauluslucceius74863 жыл бұрын

    А пример из 27:00 прямо из реального опыта? Прямо диковато выглядит когда в команде есть девопс, а коммуникации между фронтои и беком никакого.

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    к сожалению да реальный опыт суть сводится к тому что решили собирать в "последний день" перед релизом и когда запускали именно тут и возникли ошибки cors, раньше их не было. поэтому решение принимали максимально быстро :) девопс уже успел нагуглить решение дополнив nginx.conf костыльными заголовками и задеплоив это.

  • @grishavydr
    @grishavydr3 жыл бұрын

    А как консоль разработчика в хроме перевести на русский?

  • @kuvshinovee

    @kuvshinovee

    3 жыл бұрын

    export LANG=ru_RU.UTF-8 chromium

  • @alexander551
    @alexander551 Жыл бұрын

    Я реально заснул на 20 минуте

  • @viv81ster
    @viv81ster2 жыл бұрын

    Почему PATCH это паф а не пэтч?

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    неправильно произносил, но по видео ряду понятно о чем идет речь

  • @wisp011
    @wisp011 Жыл бұрын

    С английским, конечно, у тебя бедулька.. а так вроде много что по делу...

  • @laticalamonzi2814
    @laticalamonzi28142 жыл бұрын

    ...и, внезапно, CORS PNA =(

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

    PNA пришло в хроме 98 версии в качестве эксперимента и на момент записи видео я ещё с ним не сталкивался, но да полезно было бы добавить про это

  • @laticalamonzi2814

    @laticalamonzi2814

    2 жыл бұрын

    @@kuvshinovee я поняла, поэтому и поставила грустный смайлик. выхода, вроде бы всего два: https и Access-Control-Allow-Private-Network:true...

  • @kuvshinovee

    @kuvshinovee

    2 жыл бұрын

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

  • @laticalamonzi2814

    @laticalamonzi2814

    2 жыл бұрын

    @@kuvshinovee да, да, вот нас-то, в основном, и касается =)

  • @InsureInvest
    @InsureInvest4 ай бұрын

    Bhai hindi bhasha me video bana le 😂

Келесі