[MUSIC]
Узнав некоторые детали о Cors в предыдущей лекции,
в этом упражнении мы будем использовать модуль Cors Node Module и настроить наш экспресс-сервер.
Чтобы сервер мог отвечать соответствующими
заголовками, связанными с Cors на запрос, поступающий с сайта клиента.
Чтобы начать, как вы ожидали, мы сначала установим Cors Node Module.
Поэтому в командной строке введите npm install.
Убедитесь, что вы находитесь в папке сервера MuSTRION, а затем cors — save.
А затем установите модуль cors.
И, как вы можете видеть, в этом курсе я использую cors @2 .8.4.
После того, как вы установили модуль cors,
давайте перейдем к нашему редактору, а затем настроим наш экспресс-сервер.
Иду к нашему редактору.
Теперь в папке маршрутов, теперь это то, где я бы в первую очередь
применял модуль cors, потому что именно там обслуживаются все различные маршруты.
Поэтому в папке маршрутов я добавлю новый файл с именем cors.js.
И затем в этом файле, мы настроим модуль cors.
Теперь это мой способ поместить всю информацию, связанную с
Cors, в один отдельный файловый модуль узла здесь.
Поэтому в подсказке
позвольте мне попробовать const express =
require («express»).
И давайте включим
модуль Cors.
Const app = express (); а
затем скажем, белый список массива строк.
Белый список содержит все источники
, которые этот сервер готов принять.
Теперь я собираюсь включить пару из них здесь,
локальный хост: 3000, а
затем, локальный хост 3443.
И если вам нужно добавить больше источников в ваш белый список, вы можете просто добавить их
в свой белый список, потому что я явно пытаюсь настроить свой модуль cors.
Итак, здесь я объявлю
функцию A здесь,
с запросом и обратным вызовом определяются здесь.
И внутри этого я собираюсь понять, что варианты Cors здесь.
Поэтому я начну с слов CorsOptions,
var CorsOptions; а затем я
скажу, если (whiteList.indexOf (req.header ('Origin'-
)).
Таким образом, вы можете видеть, что здесь мы указываем в коде здесь,
мы говорим req.header.
Поэтому, если входящий заголовок запроса содержит источник,
то мы собираемся проверить этот белый список.
Ищете это конкретное происхождение, присутствует ли оно в этом белом списке?
Вот почему мы говорим WhiteList.indexOf.
Таким образом, это операция массива, которая выполняется здесь.
И скажем, в происхождении не равно -1.
Как вы знаете, индекс операции вернет индекс больше или
равен нулю, если он присутствует в этом массиве.
Он вернет -1, если этого нет в этом массиве.
Таким образом, очень быстрый способ проверки, чтобы увидеть,
происходят ли входящие запросы в белый список.
В этом случае мы скажем
CorsOptions, CorsOptions.
CorsOptions = и здесь я
буду указывать {origin: true}
Таким образом, говоря {origin: true}, что означает, что исходное
происхождение во входящем запросе находится в белом списке.
Так что я позволю его принять.
Поэтому, когда я устанавливаю происхождение равно true здесь, мой модуль cors
ответит назад, говоря, что контроль доступа разрешает origin, а затем включит это происхождение в
заголовки с ключом управления доступом allow origin там.
Таким образом, моя клиентская сторона будет проинформирована о том, что
сервер может принять этот запрос для этого конкретного источника.
В противном случае, если это не так, поэтому,
если req.header ('Origin') не находится в
белом списке, вы увидите CorsOptions.
{ origin: false}.
Поэтому, когда вы устанавливаете origin в false, контроллер доступа
Alloworigin не будет возвращен моим сайтом сервера.
И затем, как только мы это
сделаем, мы скажем обратный вызов (null, CorsOptions);.
Вот оно. Таким образом, вызвав эту функцию здесь
, CorsOptionsDelegate здесь, мы проверим, если входящий
запрос принадлежит одному из белых источников.
Если это так, то вы отвечаете обратно с контролем доступа
Alloworigin с источником запроса, установленного там.
В противном случае он не будет включать этот контроль доступа Alloworigin, когда он отвечает.
Теперь, из этой функции, мы будем экспортировать Cors в виде Cors здесь.
Теперь, если вы настроили модуль cors, просто сказав cors
без каких-либо опций, то это означает, что это будет отвечать
с контролем доступа Alloworigin с wild cards toll.
Существуют определенные правила, по которым это приемлемо,
особенно всякий раз, когда мы выполняем операции get.
Это нормально, принять это.
В противном случае, скажем, CorsWithOptions = cors, а
затем мы поставим
функцию) CorsOptionsDelegate), которую мы только что определили ранее.
Таким образом, если вам нужно применить A cors
с определенными опциями к конкретному маршруту, мы будем использовать эту функцию.
В противном случае мы просто будем использовать стандартные Cors.
Теперь, когда мы определили код, связанный с корсами в cors.js,
давайте начнем применять его к различным маршрутам.
Поэтому мы начнем с DishRouter.
Итак, давайте откроем DishRouter, и
в DishRouter мы сначала
импортируем [NOUE]. /кор.
Обратите внимание, что файл cors.js находится в той же папке, поэтому
мы можем просто импортировать это, сказав. /cors.js.
Модуль файлового узла.
Теперь, для запроса GET, как только мы импортировали это.
Теперь, для DishRouter, я собираюсь настроить поле опций.
Таким образом, как вы видели, всякий раз, когда вам нужно предварительно проверить ваши запросы,
клиент сначала отправит сообщение запроса HTTP OPTIONS, а затем получит
ответ со стороны сервера, прежде чем он фактически отправит фактический запрос.
Итак, для опций, если сообщение опций получено на этом конкретном маршруте,
то мы ответим как Cors.CorsWithOptions, и,
С функцией обратного вызова здесь, который говорит,
res.sendStatus, 200.
Нам не нужно отправлять ничего больше, чем просто статус отсюда.
И поэтому, когда сообщение опций будет получено,
когда это будет отвечать, мы увидим, какие результаты, когда мы отправим запрос опциона
со стороны клиента на сторону сервера в короткий рейс.
Теперь, эти варианты, я собираюсь применить к каждому маршруту.
Итак, для DishID, для
Dishid/комментариев, а также для
начала Dishid/комментариев, /:commentID.
Итак, во всех случаях, я собираюсь применить те же варианты там.
Теперь, возвращаясь назад, для
GET, я собираюсь просто применить Cors.
Итак, для запроса GET, я скажу, Cors.Cors,
поэтому обратите внимание, что это первое промежуточное программное обеспечение, которое мы применим, и
после этого оно перейдет к этому сообщению здесь.
Таким образом, промежуточное программное обеспечение Cors вводится там.
Для POST они будут применять Cors.CorsWithOptions.
То же самое для этого, PUT,
DELETE.
То же самое для остальных POST, PUT и
DELETE на всех остальных маршрутах здесь.
Для GET мы просто будем использовать cors,
поэтому позвольте мне просто применить CorsWithOptions для POST,
PUT и DELETE во всех маршрутах здесь,
поэтому POST, PUT и DELETE.
Теперь для операции GET, как мы видели для
версии DishRouter, я просто применил cors.cors,
поэтому я собираюсь скопировать это, а затем применить его ко всем GET.
Итак, для этого GET, затем прокручивая вниз для этого GET,
а затем и для последнего, также я применим тот же вариант.
Итак, мой DishRouter теперь обновлен.
Теперь я собираюсь сделать то же самое с PromorOuter,
LeaderRouter, UploadRouter, а также users.js.
Итак, давайте откроем LeaderRouter следующим образом.
В LeaderRouter первое, конечно, заключается в том, чтобы
включить модуль узла на основе файла cors, поэтому
позвольте мне скопировать его, а затем вставить его в LeaderRouter.
Затем параметры, я собираюсь применить то же самое к LeaderRouter также.
Поэтому для LeaderRouter я применим CorsWithOptions,
а затем то же самое с LeaderRouter или LeaderID.
У вас есть только два маршрута, поэтому я буду применять варианты для обоих.
Для операций GET
мне нужно применить cors.cors, поэтому скопировав это из DishRouter.
Этот GET, я применим то же самое,
а затем и этот GET, я применим то же самое.
Теперь, для POST, PUT и DELETE, как вы видели, мы применим Cors.CORSWithOptions,
Для POST,
затем PUT и DELETE.
И то же самое для POST, PUT и
DELETE LeaderID также.
Итак, теперь мой LeaderRouter обновлен, давайте перейдем к Promorouter.
И в PromorOuter также давайте начнем снизу здесь для
DELETE, CorsWithOptions, PUT, POST.
Затем к этому DELETE, PUT, POST.
И для GET, конечно,
cors.cors следуют за этим GET и другим GET ниже здесь.
А затем, давайте импортируем эти Cors,
так что копируем это из моего LeaderRouter.
Затем мы импортируем здесь Cors, а затем параметры.
Итак, я собираюсь скопировать варианты отсюда, а
затем перейти в Promorouter, я применим параметры здесь.
А также к другим PromorOuter, те же варианты.
Теперь загружаем маршрутизатор.
Поэтому перейдите в UploadRouter, снова
импортируйте, Cors,
Затем, для UploadRouter.Route,
позвольте мне применить параметры там.
И для GET
мы скажем cors.cors.
POST будет cors.CORSWithOptions.
То же самое для, PUT.
И удалите, поэтому мой маршрутизатор загрузки обновляется.
Последний из них — пользователи.
Итак, в пользователях, позвольте мне,
Импортировать автомобили, а
затем, в этом случае, потому что мы делаем router.get, router.post и так далее.
Поэтому для каждого из них я собираюсь пойти и явно применить,
cars.CarsWithOptions, даже для GET здесь.
Поскольку GET выполняется администратором здесь,
никакому другому пользователю не может быть разрешено это выполнять.
Но регистрация, также CarsWithOptions для
входа также я буду применять, Вот и все.
Давайте сохраним все изменения, чтобы
у нас были обновления всех различных маршрутов для использования автомобилей.
Давайте теперь пойдем и запустим наш сервер, а затем посмотрим, как эти машины нам помогают.
Перейдя к терминалу,
позвольте мне запустить сайт сервера здесь.
И когда сервер запущен,
давайте перейдем к нашему Почтальон, а затем отправим запрос GET.
Поэтому, когда вы отправляете запрос GET локальному хосту: 3000diss,
вы немедленно получите ответ со стороны сервера.
Конечно, прямо сейчас моя база данных пуста, поэтому я получаю пустой массив здесь, но
давайте, в частности, посмотрим на заголовки, потому что именно здесь
интересная для нас точка в этом упражнении.
Итак, здесь вы можете видеть, что у нас есть дополнительный заголовок
здесь под названием Access-Control-Allow-Origin.
Таким образом, Access-Control-Allow-Origin, как вы видите, обеспечивает дикий автомобиль,
который является звездой здесь.
Таким образом, любое происхождение для доступа к этому конкретному ресурсу,
поэтому сервер говорит, что хорошо, любое происхождение будет разрешено получить доступ к этому ресурсу.
Для запроса GET мы довольны этим.
Давайте теперь войдем в систему, а
затем, как только мы получим токен, позвольте мне скопировать токен здесь.
А затем мы выполним операцию удаления на нашем сайте сервера.
Поэтому мы удалим блюда здесь, поэтому
позвольте мне включить, Token в заголовок авторизации здесь.
А также обратите внимание, что для операции удаления я устанавливаю источник.
Таким образом, другое поле здесь называется origin to httpslocalhost:3343 здесь.
Таким образом, указывая, что эта операция удаления фактически
пытается удалить в этом конкретном происхождении здесь.
И поэтому, когда мы выполняем эту операцию так, если вы делаете это из браузера,
источник будет автоматически установлен браузером
на основе веб-страницы, из которой исходит запрос.
Но здесь, поскольку мы используем Почтальона, я должен явно установить происхождение здесь.
Поэтому позвольте мне отправить запрос с этим полем происхождения, установленным здесь.
И тогда вы заметите, что поле заголовка теперь содержит
Access-Control-Allow-Origin с указанным здесь локальным хостом: 3443.
И как вы заметите, что это происхождение находится в белом списке.
Вот почему этот Access-Control-Allow-Origin установлен на
тот же источник, что и мы там указали.
Если указать другой источник, например,
если указать, например, Say localhost:2000.
Вы заметите, что в ответе, исходящем от сервера,
это не будет иметь Access-Control-Allow-Origin, установленного здесь.
Потому что этот конкретный адрес не находится в белом списке на сайте сервера.
Давайте теперь посмотрим на пример предполетного запроса.
Чтобы сделать это, в Почтальоне выберите Опции здесь,
а затем давайте отправим предварительный запрос
локальному хосту: 3443diss.
И в заголовке мы будем,
Поместите происхождение как https: localhost3443.
И затем это отправить этот запрос на сервер.
И в ответ на этот запрос опций, который вы отправили на сервер,
вы заметите, что в ответном сообщении мы скажем 204 No Content.
Здесь нет содержимого, подлежащего возврату.
Но, когда вы посмотрите на заголовки ответного сообщения, которое приходит, обратите внимание, что
у нас есть Access-Control-Allow-Origin, чтобы установить это значение.
Также обратите внимание, что он устанавливает методы Access-Control-Allow.
И здесь он указывает те методы, которые сервер будет
готов принять в этой конечной точке.
Таким образом, вы информируете клиента о том, что
все эти методы приемлемы для сервера в соответствующей конечной точке.
Итак, вот как мы можем сделать предполетный запрос.
Отправляя сначала сообщение запроса параметров, а
затем получая обратно информацию с сервера здесь.
И, как вы помните, это то, что мы настроили в
части опций каждой из конечных точек маршрутизатора.
Так вот как мы можем настроить наш модуль узлов автомобилей, а
затем настроить наш сервер, чтобы отвечать с различными сообщениями заголовков.
Этим мы завершаем это упражнение.
В этом упражнении мы видели, как мы можем настроить наш сервер, чтобы иметь возможность отправлять
обратно различные заголовки, связанные с курсом в ответном сообщении
, используя модуль узла курса.
С этим мы завершаем это упражнение.
Это хорошее время для вас, чтобы сделать комментарий GIT с курсом сообщений.
[ МУЗЫКА]