1
00:00:00,000 --> 00:00:04,770
[MUZIKA]

2
00:00:04,770 --> 00:00:09,509
Having understood some details
about cors in the previous lecture,

3
00:00:09,509 --> 00:00:15,670
in this exercise we will use the cors Node
Module and configure our express server.

4
00:00:15,670 --> 00:00:21,760
To enable the server to respond
with the appropriate cors related

5
00:00:21,760 --> 00:00:26,340
headers to the request coming
in from the client's site.

6
00:00:28,460 --> 00:00:36,060
To get started as you would expect, we
will first install the cors Node Module.

7
00:00:36,060 --> 00:00:39,280
So at the prompt, type npm install.

8
00:00:39,280 --> 00:00:46,170
Make sure that you are in the conFusion
server folder, and then cors -- save.

9
00:00:46,170 --> 00:00:48,160
And then install the cors Module.

10
00:00:49,160 --> 00:00:54,140
And as you can see,
in this course I am using cors@2.8.4.

11
00:00:54,140 --> 00:00:57,530
Once you have installed the cors Module,

12
00:00:57,530 --> 00:01:03,260
let's go to our editor and
then configure our express server.

13
00:01:03,260 --> 00:01:05,320
Going to our editor.

14
00:01:05,320 --> 00:01:10,360
Now in the routes folder, now that is
where I would be primarily applying

15
00:01:10,360 --> 00:01:14,980
the cors Module because that is where all
the various routes are being serviced.

16
00:01:14,980 --> 00:01:22,130
So in the routes folder,
I will add in a new file named cors.js.

17
00:01:22,130 --> 00:01:27,180
And then in this file,
we will configure the cors Module.

18
00:01:27,180 --> 00:01:32,795
Now this is my way of putting
all the information related to

19
00:01:32,795 --> 00:01:38,980
cors in one separate file
based node module here.

20
00:01:38,980 --> 00:01:42,445
So at the prompt,

21
00:01:42,445 --> 00:01:47,527
let me try const express =

22
00:01:47,527 --> 00:01:53,979
require('express').

23
00:01:53,979 --> 00:01:58,795
And let's get,

24
00:02:02,831 --> 00:02:05,263
The cors module in.

25
00:02:10,379 --> 00:02:15,434
Const app = express(); and

26
00:02:15,434 --> 00:02:23,800
then let's say a whitelist
of an array of strings.

27
00:02:23,800 --> 00:02:28,843
The whitelist contains all the origins

28
00:02:28,843 --> 00:02:33,892
that this server is willing to accept.

29
00:02:33,892 --> 00:02:38,942
Now I am going to include
a couple of them here,

30
00:02:38,942 --> 00:02:41,793
localhost:3000 and

31
00:02:41,793 --> 00:02:48,147
then, Local host 3443.

32
00:02:48,147 --> 00:02:53,415
And if you need more origins to be added
to your whitelist, you can simply add them

33
00:02:53,415 --> 00:02:58,544
to your whitelist because I am explicitly
trying to configure my cors Module.

34
00:02:58,544 --> 00:03:04,444
So here, I will declare

35
00:03:04,444 --> 00:03:12,006
a A function here,

36
00:03:16,755 --> 00:03:23,000
With the request and
call back being defined here.

37
00:03:23,000 --> 00:03:29,180
And inside this I'm going to
figure that cors options here.

38
00:03:29,180 --> 00:03:37,337
So I will start out by saying corsOptions,

39
00:03:37,337 --> 00:03:43,683
var corsOptions; and then I'll

40
00:03:43,683 --> 00:03:53,453
say
if(whitelist.indexOf(req.header('Origin'-

41
00:03:53,453 --> 00:03:56,850
))).

42
00:03:56,850 --> 00:04:01,920
So you can see that here we
are specifying in the code here,

43
00:04:01,920 --> 00:04:03,390
we are saying req.header.

44
00:04:03,390 --> 00:04:07,770
So if the incoming request
header contains an origin feed,

45
00:04:07,770 --> 00:04:11,420
then we are going to check this whitelist.

46
00:04:11,420 --> 00:04:15,770
Looking for that particular origin,
is it present in this whitelist?

47
00:04:15,770 --> 00:04:18,360
So that's why we are saying
whitelist.indexOf.

48
00:04:18,360 --> 00:04:23,020
So this is an array
operation being done here.

49
00:04:23,020 --> 00:04:29,715
And we will say in origin
is not equal to -1.

50
00:04:30,810 --> 00:04:37,575
As you know the index of operation
will return the index greater than or

51
00:04:37,575 --> 00:04:42,057
equal to zero if this is
present in this array.

52
00:04:42,057 --> 00:04:46,620
It'll return -1 if this is
not present in this array.

53
00:04:46,620 --> 00:04:51,155
So a very quick way of checking
to see if the incoming

54
00:04:51,155 --> 00:04:54,860
requests origin in the whitelist.

55
00:04:54,860 --> 00:04:58,875
In that case, we will say

56
00:04:58,875 --> 00:05:03,854
corsOptions, corsOptions.

57
00:05:06,358 --> 00:05:11,027
CorsOptions = and this is where I

58
00:05:11,027 --> 00:05:15,541
will specify { origin: true}

59
00:05:17,633 --> 00:05:23,038
So by saying { origin: true},
meaning that the original

60
00:05:23,038 --> 00:05:27,830
origin in the incoming
request is in the whitelist.

61
00:05:27,830 --> 00:05:30,995
So I will allow it to be accepted.

62
00:05:30,995 --> 00:05:36,305
So when I set origin is equal to
true here, then my cors Module will

63
00:05:36,305 --> 00:05:42,565
reply back saying access control allow
origin, and then include that origin into

64
00:05:42,565 --> 00:05:47,590
the headers with the access
control allow origin key there.

65
00:05:47,590 --> 00:05:53,130
So that way my client side will
be informed saying it's okay for

66
00:05:53,130 --> 00:05:59,250
the server to accept this request for
this particular origin.

67
00:05:59,250 --> 00:06:03,858
Otherwise, so if that is not the case, so

68
00:06:03,858 --> 00:06:09,127
if the req.header's(' Origin') is not in

69
00:06:09,127 --> 00:06:14,547
the whitelist,
then you will see corsOptions.

70
00:06:17,920 --> 00:06:19,610
{ origin: false}.

71
00:06:19,610 --> 00:06:24,815
So when you set origin to false,
then the access controller

72
00:06:24,815 --> 00:06:29,415
allowOrigin will not be
returned by my server site.

73
00:06:29,415 --> 00:06:33,411
And then once we have done that,

74
00:06:33,411 --> 00:06:40,345
then we'll say callback(null,
corsOptions);.

75
00:06:40,345 --> 00:06:43,335
That's it.
So by calling this function here,

76
00:06:43,335 --> 00:06:48,010
corsOptionsDelegate here,
we will check to see if the incoming

77
00:06:48,010 --> 00:06:53,100
request belongs to one of
the whitelisted origins.

78
00:06:53,100 --> 00:06:57,342
If it is,
then you reply back with access control

79
00:06:57,342 --> 00:07:02,313
allowOrigin with the origin
of the request set in there.

80
00:07:02,313 --> 00:07:08,490
Otherwise it'll not include that access
control allowOrigin when it replies.

81
00:07:08,490 --> 00:07:16,250
Now, from this function,
we will export cors as cors here.

82
00:07:16,250 --> 00:07:20,724
Now, if you configure the cors
Module by simply saying cors

83
00:07:20,724 --> 00:07:24,751
without any options,
then that means this will reply

84
00:07:24,751 --> 00:07:29,597
back with access control allowOrigin
with the wild cards toll.

85
00:07:29,597 --> 00:07:32,748
There are certain rules on
which this is acceptable to do,

86
00:07:32,748 --> 00:07:35,660
especially whenever we
perform get operations.

87
00:07:35,660 --> 00:07:37,830
It's okay to accept that.

88
00:07:37,830 --> 00:07:44,660
Otherwise, we'll say,
corsWithOptions = cors, and

89
00:07:44,660 --> 00:07:50,639
then we'll supply
the )corsOptionsDelegate)

90
00:07:50,639 --> 00:07:56,060
function that we have
just defined earlier.

91
00:07:57,290 --> 00:08:02,230
So that way, if you need to apply A cors

92
00:08:02,230 --> 00:08:07,190
with specific options to a particular
route, we will use this function.

93
00:08:07,190 --> 00:08:09,960
Otherwise, we'll simply
use the standard cors.

94
00:08:09,960 --> 00:08:15,030
Now that we have defined
the cors-related code in cors.js,

95
00:08:15,030 --> 00:08:19,410
let's start applying this
to the various routes.

96
00:08:19,410 --> 00:08:22,040
So we will start with the dishRouter.

97
00:08:22,040 --> 00:08:27,402
So let's open the dishRouter, and

98
00:08:27,402 --> 00:08:32,406
in the dishRouter, we will first

99
00:08:32,406 --> 00:08:37,064
[NOISE] import [NOISE] ./cors.

100
00:08:37,064 --> 00:08:41,320
Note that the cors.js file
is in the same folder, so

101
00:08:41,320 --> 00:08:45,300
we can just import that
by saying ./cors.js.

102
00:08:45,300 --> 00:08:47,417
File-based node module.

103
00:08:47,417 --> 00:08:53,650
Now, for the GET request,
once we have imported that.

104
00:08:53,650 --> 00:08:58,970
Now, for the dishRouter,
I am going to set up the options field.

105
00:08:58,970 --> 00:09:03,510
So as you saw, whenever you need
to preflight your requests,

106
00:09:03,510 --> 00:09:10,250
the client will first send the HTTP
OPTIONS request message and then obtain

107
00:09:10,250 --> 00:09:14,340
the reply from the server side before
it actually sends the actual request.

108
00:09:14,340 --> 00:09:22,960
So, for options, if the options message
is received on this particular route,

109
00:09:22,960 --> 00:09:28,944
then we will respond as
cors.corsWithOptions, and,

110
00:09:31,539 --> 00:09:38,022
With the callback function here,
which says,

111
00:09:38,022 --> 00:09:45,773
res.sendStatus, 200.

112
00:09:45,773 --> 00:09:51,850
We don't need to send anything more
than just the status from here.

113
00:09:51,850 --> 00:09:55,120
And so,
when an options message is received,

114
00:09:55,120 --> 00:10:00,060
when this will respond, we will see what
results when we send an option request

115
00:10:02,570 --> 00:10:05,230
from the client side to the server
side in a short flight.

116
00:10:05,230 --> 00:10:08,910
Now, this options,
I'm going to apply to every route.

117
00:10:08,910 --> 00:10:11,998
So, for the dishId, for

118
00:10:11,998 --> 00:10:16,560
the dishId/comments, and also for

119
00:10:16,560 --> 00:10:22,605
the dishId/comments start, /:commentId.

120
00:10:24,210 --> 00:10:28,417
So, all the cases,
I'm going to apply the same options there.

121
00:10:30,360 --> 00:10:34,090
Now, going back up, for

122
00:10:34,090 --> 00:10:39,290
the GET, I'm going to simply apply cors.

123
00:10:39,290 --> 00:10:46,474
So, for the GET request,
I'll say, Cors.cors,

124
00:10:46,474 --> 00:10:51,243
so notice that this is the first
middleware that we'll apply, and

125
00:10:51,243 --> 00:10:54,660
after that it will pass
on to this message here.

126
00:10:54,660 --> 00:10:58,380
So the cors middleware
is introduced there.

127
00:10:58,380 --> 00:11:05,750
For the POST,
they will apply cors.corsWithOptions.

128
00:11:05,750 --> 00:11:10,240
Same thing for that, PUT,

129
00:11:12,704 --> 00:11:16,760
DELETE.

130
00:11:16,760 --> 00:11:21,550
Same thing for
the remaining POST, PUT, and

131
00:11:21,550 --> 00:11:25,780
DELETE on all the other routes here.

132
00:11:25,780 --> 00:11:31,562
For the GET, we'll just only use the cors,

133
00:11:31,562 --> 00:11:38,124
so let me just apply
the corsWithOptions to POST,

134
00:11:38,124 --> 00:11:43,437
PUT, and DELETE in all the routes here,

135
00:11:43,437 --> 00:11:47,201
so POST, PUT, and DELETE.

136
00:11:49,100 --> 00:11:52,711
Now, for the GET operation as we saw for

137
00:11:52,711 --> 00:11:57,750
the version of dishRouter
I just applied cors.cors,

138
00:11:57,750 --> 00:12:02,910
so I'm going to copy that and
then apply it to all the GETs.

139
00:12:04,290 --> 00:12:09,580
So, for this GET,
then scrolling down for this GET, and

140
00:12:09,580 --> 00:12:16,340
then also for the last,
also I'll apply the same option.

141
00:12:16,340 --> 00:12:19,770
So my dishRouter is now updated.

142
00:12:19,770 --> 00:12:23,672
Now, I'm going to do the same
thing with the promoRouter,

143
00:12:23,672 --> 00:12:28,180
the leaderRouter, the uploadRouter,
and also the users.js.

144
00:12:28,180 --> 00:12:32,660
So, let's open the leaderRouter next.

145
00:12:32,660 --> 00:12:37,127
In the leaderRouter,
the first thing of course is to

146
00:12:37,127 --> 00:12:41,086
include the cors file-based node module,
so

147
00:12:41,086 --> 00:12:46,620
let me copy that and
then paste it into the leaderRouter.

148
00:12:46,620 --> 00:12:52,970
Then the options, I'm going to apply
the same thing to the leaderRouter also.

149
00:12:52,970 --> 00:12:58,230
So for the leaderRouter,
I will apply the corsWithOptions,

150
00:12:58,230 --> 00:13:01,370
and then same thing with
the leaderRouter or leaderId.

151
00:13:01,370 --> 00:13:08,190
You have only two routes here, so
I will apply the options for both.

152
00:13:08,190 --> 00:13:12,160
For the GET operations,

153
00:13:12,160 --> 00:13:15,905
I need to apply the cors.cors, so
copying this from the dishRouter.

154
00:13:17,180 --> 00:13:20,300
This GET, I will apply the same thing, and

155
00:13:20,300 --> 00:13:24,120
then also this GET,
I'll apply the same thing.

156
00:13:24,120 --> 00:13:31,680
Now, for the POST, PUT, and DELETE, as you
saw, we'll apply cors.corsWithOptions,

157
00:13:37,239 --> 00:13:40,443
For the POST,

158
00:13:40,443 --> 00:13:45,790
then PUT, and DELETE.

159
00:13:45,790 --> 00:13:50,462
And same thing for the POST, PUT, and

160
00:13:50,462 --> 00:13:54,850
DELETE of the leaderId also.

161
00:13:54,850 --> 00:13:59,410
So now my leaderRouter is updated,
let's go to promoRouter.

162
00:13:59,410 --> 00:14:05,537
And in the promoRouter also,
let's start at the bottom here for

163
00:14:05,537 --> 00:14:09,970
the DELETE, corsWithOptions, PUT, POST.

164
00:14:11,130 --> 00:14:18,400
Then to this DELETE, PUT, POST.

165
00:14:18,400 --> 00:14:22,036
And for the GET, of course,

166
00:14:22,036 --> 00:14:29,480
the cors.cors follow this GET and
the other GET down below here.

167
00:14:31,680 --> 00:14:36,620
And then, let's import that cors,

168
00:14:36,620 --> 00:14:40,782
so copying this from my leaderRouter.

169
00:14:40,782 --> 00:14:44,940
Then we import cors here,
and then the options.

170
00:14:44,940 --> 00:14:48,713
So, I'm going to copy
the options from here and

171
00:14:48,713 --> 00:14:54,190
then going into the promoRouter,
I will apply the options here.

172
00:14:56,020 --> 00:15:02,913
And also to the other promoRouter,
same options.

173
00:15:02,913 --> 00:15:06,090
Now, uploadRouter.

174
00:15:06,090 --> 00:15:11,801
So go into the uploadRouter, again,

175
00:15:11,801 --> 00:15:17,945
import, Cors,

176
00:15:26,379 --> 00:15:30,904
Then after that, for
the uploadRouter.route,

177
00:15:30,904 --> 00:15:33,820
let me apply the options there.

178
00:15:36,859 --> 00:15:39,929
And for the GET,

179
00:15:39,929 --> 00:15:44,590
we'll say cors.cors.

180
00:15:44,590 --> 00:15:48,698
The POST would be cors.corsWithOptions.

181
00:15:52,360 --> 00:15:59,770
Same for the, PUT.

182
00:15:59,770 --> 00:16:04,510
And delete, so
my upload router is updated.

183
00:16:05,800 --> 00:16:08,090
The last one is users.

184
00:16:08,090 --> 00:16:12,447
So, in the users, let me,

185
00:16:21,187 --> 00:16:25,157
Import cars, And

186
00:16:25,157 --> 00:16:30,078
then, in this case because we're doing
router.get, router.post, and so on.

187
00:16:30,078 --> 00:16:37,500
So for each of them,
I'm going to go in and explicitly apply,

188
00:16:45,144 --> 00:16:50,900
cars.carsWithOptions, even for
the GET here.

189
00:16:50,900 --> 00:16:54,398
Because the GET is performed
by the admin here,

190
00:16:54,398 --> 00:16:57,730
no other user may be
allowed to perform that.

191
00:16:57,730 --> 00:17:03,527
But the signup, also carsWithOptions for

192
00:17:03,527 --> 00:17:10,540
the login also I'll apply, That's it.

193
00:17:10,540 --> 00:17:12,966
Let's save all the changes so

194
00:17:12,966 --> 00:17:17,147
we have updates all
the various routes to use cars.

195
00:17:17,147 --> 00:17:23,860
Let's now get go and start our server and
then see how this cars helps us.

196
00:17:23,860 --> 00:17:27,122
Going to the terminal,

197
00:17:27,122 --> 00:17:31,857
let me start the server site here.

198
00:17:31,857 --> 00:17:34,947
And when the server is started,

199
00:17:34,947 --> 00:17:39,990
let's go to our Postman and
then send a GET request.

200
00:17:42,015 --> 00:17:47,475
So when you send a GET request
to a localhost:3000dishes,

201
00:17:47,475 --> 00:17:52,890
you will immediately get
a response from the server side.

202
00:17:52,890 --> 00:17:57,690
Of course right now my database is
empty so I get a empty array here, but

203
00:17:57,690 --> 00:18:01,260
let's in particular look at
the headers because that is where

204
00:18:02,260 --> 00:18:06,720
the point of interest for
us is in this exercise.

205
00:18:06,720 --> 00:18:11,573
So in here, you can see that
we have an additional header

206
00:18:11,573 --> 00:18:15,930
here called Access-Control-Allow-Origin.

207
00:18:15,930 --> 00:18:20,306
So the Access-Control-Allow-Origin
as you see provides the wild car,

208
00:18:20,306 --> 00:18:22,140
which is the star here.

209
00:18:22,140 --> 00:18:25,874
So meaning that, any origin to
access this particular resource,

210
00:18:25,874 --> 00:18:30,485
so the server says that okay, any origin
will be allowed to access this resource.

211
00:18:30,485 --> 00:18:32,960
For the GET request we
are happy with that.

212
00:18:34,070 --> 00:18:37,468
Let us now log ourselves into the system,
and

213
00:18:37,468 --> 00:18:42,530
then once we obtain the token,
let me copy the token here.

214
00:18:42,530 --> 00:18:49,210
And then we'll perform a delete
operation on our server site.

215
00:18:50,320 --> 00:18:54,930
So we'll delete the dishes here, so

216
00:18:54,930 --> 00:19:01,360
let me include the,
Token into the authorization header here.

217
00:19:01,360 --> 00:19:05,561
And also notice that for the delete
operation I am setting the origin.

218
00:19:05,561 --> 00:19:13,280
So another field here called origin
to httpslocalhost:3343 here.

219
00:19:13,280 --> 00:19:16,680
So indicating that this
delete operation is actually

220
00:19:17,860 --> 00:19:20,740
trying to delete at this
particular origin here.

221
00:19:22,170 --> 00:19:28,521
And so when we perform this operation so,
if you are doing this from a browser,

222
00:19:28,521 --> 00:19:33,142
the origin will be automatically
set by the browser based

223
00:19:33,142 --> 00:19:37,779
upon the web page from which
the request is originating.

224
00:19:37,779 --> 00:19:43,400
But here, since we are using Postman,
I have to explicitly set the origin here.

225
00:19:43,400 --> 00:19:47,060
So let me send in the request
with this origin field set here.

226
00:19:47,060 --> 00:19:51,415
And then you would notice that
the header field now contains

227
00:19:51,415 --> 00:19:57,615
Access-Control-Allow-Origin with
the localhost:3443 specified here.

228
00:19:57,615 --> 00:20:02,280
And as you'll notice that this
origin is in the white list.

229
00:20:02,280 --> 00:20:06,520
So that's why this
Access-Control-Allow-Origin is set to

230
00:20:06,520 --> 00:20:10,520
the same origin that we specified there.

231
00:20:10,520 --> 00:20:15,927
If you specify a different origin for
example,

232
00:20:15,927 --> 00:20:23,430
if you specify,
Say localhost:2000 for example.

233
00:20:23,430 --> 00:20:30,490
You will notice that this will not have,
in the reply coming from the server,

234
00:20:30,490 --> 00:20:36,210
this will not have
the Access-Control-Allow-Origin set here.

235
00:20:36,210 --> 00:20:42,790
Because, this particular address is not
in the whitelist on the server site.

236
00:20:42,790 --> 00:20:45,710
Let's now look at an example
of preflighting a request.

237
00:20:45,710 --> 00:20:51,749
So to do that, in the Postman,
select Options here,

238
00:20:51,749 --> 00:20:56,718
and then let's send a preflighting request

239
00:20:56,718 --> 00:21:00,650
to localhost:3443dishes.

240
00:21:00,650 --> 00:21:05,170
And in the header we will, Put

241
00:21:05,170 --> 00:21:10,725
the origin as https:localhost3443.

242
00:21:10,725 --> 00:21:18,120
And then this send this
request to the server.

243
00:21:18,120 --> 00:21:22,575
And in reply to this options request
that you sent to the server,

244
00:21:22,575 --> 00:21:27,540
you'll notice that in the reply
message we'll say 204 No Content.

245
00:21:27,540 --> 00:21:31,790
There is no content to be returned here.

246
00:21:31,790 --> 00:21:39,110
But, when you look at the headers of the
reply message that comes in, notice that

247
00:21:39,110 --> 00:21:43,960
we have the Access-Control-Allow-Origin
to be set to that value.

248
00:21:43,960 --> 00:21:47,750
Also note that it sets
the Access-Control-Allow methods.

249
00:21:47,750 --> 00:21:52,340
And here it specifies those
methods that the server will be

250
00:21:52,340 --> 00:21:55,500
willing to accept at this end point.

251
00:21:55,500 --> 00:22:00,880
So thereby you are informing
the client saying that,

252
00:22:00,880 --> 00:22:06,240
all these methods are acceptable for
the server at the corresponding end point.

253
00:22:06,240 --> 00:22:12,120
So, this is how we can do
preflighting of a request.

254
00:22:12,120 --> 00:22:16,130
By sending the options
request message first, and

255
00:22:16,130 --> 00:22:19,700
then getting back the information
from the server here.

256
00:22:19,700 --> 00:22:24,030
And as you recall,
this is what we configured in the options

257
00:22:24,030 --> 00:22:29,160
part of each of the router end points.

258
00:22:29,160 --> 00:22:34,098
So this is how we can configure
our cars node module and

259
00:22:34,098 --> 00:22:40,490
then configure our server to respond
with various header messages.

260
00:22:40,490 --> 00:22:43,360
With this we complete this exercise.

261
00:22:43,360 --> 00:22:48,080
In this exercise we have seen how we can
configure our server to be able to send

262
00:22:48,080 --> 00:22:53,080
back various course related
headers in the reply message

263
00:22:53,080 --> 00:22:55,190
using the course node module.

264
00:22:56,330 --> 00:22:58,196
With this, we complete this exercise.

265
00:22:58,196 --> 00:23:01,515
This is a good time for you to do
a GIT comment with the message course.

266
00:23:01,515 --> 00:23:02,467
[MUZIKA]