1
00:00:02,090 --> 00:00:05,330
Now to allow this frontend axis as explained,

2
00:00:05,330 --> 00:00:06,990
we have to go to the backend code,

3
00:00:06,990 --> 00:00:09,200
because we can only change it there.

4
00:00:09,200 --> 00:00:13,520
And there it's an app.js where I wanna add a new middleware.

5
00:00:13,520 --> 00:00:16,170
There are third-party packages we can use,

6
00:00:16,170 --> 00:00:18,430
but here we will write our own middleware

7
00:00:18,430 --> 00:00:21,453
so that we fully understand how course works.

8
00:00:22,520 --> 00:00:24,460
For this, I'll add a middlewares folder,

9
00:00:24,460 --> 00:00:26,690
which is optional though,

10
00:00:26,690 --> 00:00:29,280
in which I'll add a cors.js file.

11
00:00:29,280 --> 00:00:33,700
And in there, I'll add an enableCors function,

12
00:00:33,700 --> 00:00:37,783
name of CORS is up to you, which I will export.

13
00:00:38,970 --> 00:00:41,210
And now, before we add any logic here,

14
00:00:41,210 --> 00:00:44,810
back in app.js, I wanna import this function.

15
00:00:44,810 --> 00:00:47,600
So here, I'll add enableCors

16
00:00:47,600 --> 00:00:50,750
and get this by requiring middlewares cors.

17
00:00:52,110 --> 00:00:54,090
And then let's say

18
00:00:54,090 --> 00:00:57,100
here at the very beginning, actually,

19
00:00:57,100 --> 00:00:58,350
I will

20
00:00:58,350 --> 00:00:59,185
call

21
00:00:59,185 --> 00:01:00,310
enableCors.

22
00:01:00,310 --> 00:01:01,630
Whoops, not like this,

23
00:01:01,630 --> 00:01:02,570
instead like this.

24
00:01:02,570 --> 00:01:05,970
We point at enableCors, I should say,

25
00:01:05,970 --> 00:01:09,270
because that's a function that should be executed by express

26
00:01:09,270 --> 00:01:11,483
for every incoming request.

27
00:01:13,210 --> 00:01:16,470
And now it's inside this enableCors middleware function,

28
00:01:16,470 --> 00:01:19,080
where I wanna add those response headers

29
00:01:19,080 --> 00:01:20,823
I just showed you on the slide.

30
00:01:21,890 --> 00:01:24,150
So here we have a request and a response object

31
00:01:24,150 --> 00:01:27,763
and this next function as an all middleware functions.

32
00:01:28,940 --> 00:01:29,930
And then

33
00:01:29,930 --> 00:01:31,750
we can use the res object here

34
00:01:31,750 --> 00:01:35,180
to call a set header method.

35
00:01:35,180 --> 00:01:38,210
That's a method provided by express js,

36
00:01:38,210 --> 00:01:40,720
the backend framework we are using here

37
00:01:40,720 --> 00:01:42,713
to add a header to the response.

38
00:01:44,500 --> 00:01:47,430
Now set header wants two parameter values.

39
00:01:47,430 --> 00:01:50,270
The first value is the header which we wanna set.

40
00:01:50,270 --> 00:01:53,653
The second value is the value for that header.

41
00:01:54,670 --> 00:01:57,030
Now, the first header which I wanna add

42
00:01:57,030 --> 00:01:58,370
is this Access dash

43
00:01:58,370 --> 00:01:59,410
Control dash

44
00:01:59,410 --> 00:02:02,040
Allow Origin header.

45
00:02:02,040 --> 00:02:04,280
With that, we control which over domains

46
00:02:04,280 --> 00:02:06,390
we wanna grant access here.

47
00:02:06,390 --> 00:02:07,930
And here, you could be specific

48
00:02:07,930 --> 00:02:10,560
and say something like your-page.com

49
00:02:10,560 --> 00:02:12,660
should be able to send requests.

50
00:02:12,660 --> 00:02:16,370
But here, I'll just add a star, which means any of our page

51
00:02:16,370 --> 00:02:18,880
will be allowed to send requests.

52
00:02:18,880 --> 00:02:20,530
And of course, if you're building an API

53
00:02:20,530 --> 00:02:23,570
just for yourselves, this might not make sense.

54
00:02:23,570 --> 00:02:26,930
You might wanna specify a specific domain in this case,

55
00:02:26,930 --> 00:02:29,530
but I wanna show the wildcard case here as well,

56
00:02:29,530 --> 00:02:33,040
because if you would be building an API like the Stripe API,

57
00:02:33,040 --> 00:02:36,120
that should be accessed by a lot of our developers

58
00:02:36,120 --> 00:02:38,120
working on a lot of our projects,

59
00:02:38,120 --> 00:02:41,253
then you might wanna offer this generic type of access here.

60
00:02:42,270 --> 00:02:44,800
Now, next we add another header here,

61
00:02:44,800 --> 00:02:45,910
and that would be the

62
00:02:45,910 --> 00:02:47,570
Access dash

63
00:02:47,570 --> 00:02:48,710
Control dash

64
00:02:48,710 --> 00:02:49,860
Allowed dash

65
00:02:49,860 --> 00:02:52,210
Methods header.

66
00:02:52,210 --> 00:02:54,730
By the way, it does not matter in which order

67
00:02:54,730 --> 00:02:56,143
you add those headers.

68
00:02:57,110 --> 00:03:01,150
Now here, we specify which HTTP methods we wanna allow.

69
00:03:01,150 --> 00:03:05,010
Now, in our case, our backend here, of course, has routes

70
00:03:05,010 --> 00:03:07,920
for get, post, patch, and delete.

71
00:03:07,920 --> 00:03:11,060
So it makes sense to allow these four methods.

72
00:03:11,060 --> 00:03:14,570
So here I'll add GET, written like this, comma POST,

73
00:03:14,570 --> 00:03:16,640
comma PATCH,

74
00:03:16,640 --> 00:03:17,630
comma DELETE.

75
00:03:17,630 --> 00:03:22,180
That is how you can unlock methods, which are now allowed.

76
00:03:22,180 --> 00:03:23,970
I will also add a fifth method here,

77
00:03:23,970 --> 00:03:26,440
but just the options method.

78
00:03:26,440 --> 00:03:27,850
This is not a request which

79
00:03:27,850 --> 00:03:29,870
we'll send ourselves in any place

80
00:03:29,870 --> 00:03:33,070
and we'll also not handle it ourselves on the backend,

81
00:03:33,070 --> 00:03:35,650
but it is an automatically sent request,

82
00:03:35,650 --> 00:03:39,180
which the browser will send when you use Ajax requests,

83
00:03:39,180 --> 00:03:42,380
where it basically evaluates whether the request

84
00:03:42,380 --> 00:03:44,020
it really wants to send,

85
00:03:44,020 --> 00:03:47,800
for example, a delete request will be allowed by the server.

86
00:03:47,800 --> 00:03:49,803
So we should also add options here.

87
00:03:51,430 --> 00:03:54,680
Now, last but not least, I will also add another header

88
00:03:54,680 --> 00:03:56,020
and that's Access dash

89
00:03:56,020 --> 00:03:57,020
Control dash

90
00:03:57,020 --> 00:03:58,470
Allow dash

91
00:03:58,470 --> 00:03:59,920
Headers.

92
00:03:59,920 --> 00:04:02,480
And with that, we control which headers

93
00:04:02,480 --> 00:04:06,520
might be added by the client that sends a request.

94
00:04:06,520 --> 00:04:09,020
So now we're talking about the request headers

95
00:04:09,020 --> 00:04:10,173
that we wanna support.

96
00:04:11,350 --> 00:04:14,670
Now, a bunch of default headers are always supported

97
00:04:14,670 --> 00:04:16,630
here, I just an additional one

98
00:04:16,630 --> 00:04:19,079
to allow the contents dash type header,

99
00:04:19,079 --> 00:04:21,740
because that is a header which I do is set explicitly

100
00:04:21,740 --> 00:04:24,980
on the frontend for some of my requests.

101
00:04:24,980 --> 00:04:27,890
For the create to do request,

102
00:04:27,890 --> 00:04:31,800
I set the content type header to application json,

103
00:04:31,800 --> 00:04:35,223
hence, I wanna allow content type on the backend here.

104
00:04:36,410 --> 00:04:38,640
Now, there also are other headers,

105
00:04:38,640 --> 00:04:40,420
which you could check out.

106
00:04:40,420 --> 00:04:41,810
Other access control heteros

107
00:04:41,810 --> 00:04:43,490
you could add to the response

108
00:04:43,490 --> 00:04:46,010
and attached you find a link to an MDN page

109
00:04:46,010 --> 00:04:48,637
with more details about cores

110
00:04:48,637 --> 00:04:50,090
and the heteros you can add,

111
00:04:50,090 --> 00:04:53,350
but these are the three main headers, which you want to add,

112
00:04:53,350 --> 00:04:57,060
if you want to unlock your API for it being usable

113
00:04:57,060 --> 00:04:59,203
by upper decoupled frontends.

114
00:05:00,930 --> 00:05:03,010
Last but not least, we have to call next,

115
00:05:03,010 --> 00:05:06,070
because of course the request which we handled here

116
00:05:06,070 --> 00:05:08,250
should still be allowed to travel on,

117
00:05:08,250 --> 00:05:09,220
and for example,

118
00:05:09,220 --> 00:05:12,363
reach the final route handler that should handle it.

119
00:05:13,880 --> 00:05:16,400
But now with that middleware added

120
00:05:16,400 --> 00:05:18,790
and also added here in app js.

121
00:05:18,790 --> 00:05:21,540
If we now reload our frontend page,

122
00:05:21,540 --> 00:05:22,960
we should see to do it here.

123
00:05:22,960 --> 00:05:25,600
If you have any introduce on the backend,

124
00:05:25,600 --> 00:05:26,790
if you don't have any yet,

125
00:05:26,790 --> 00:05:30,560
you can of course add a new to-do here like this.

126
00:05:30,560 --> 00:05:33,480
And what you'll notice if you add on you to do

127
00:05:33,480 --> 00:05:35,930
is if you watch this refresh icon here,

128
00:05:35,930 --> 00:05:37,380
in the top left corner,

129
00:05:37,380 --> 00:05:40,150
as I click save, it doesn't change.

130
00:05:40,150 --> 00:05:43,000
It never spins or changes to a cross,

131
00:05:43,000 --> 00:05:45,453
because this page never reloads.

132
00:05:46,640 --> 00:05:49,490
Instead here, we really handle all of that

133
00:05:49,490 --> 00:05:53,150
just from inside the client side, JavaScript code.

134
00:05:53,150 --> 00:05:55,260
This new Dom element here at the bottom

135
00:05:55,260 --> 00:05:57,993
was added with client side JavaScript code.

136
00:05:59,050 --> 00:06:03,100
I can also update to do's here or delete to do's.

137
00:06:03,100 --> 00:06:04,310
And if I reload the page,

138
00:06:04,310 --> 00:06:06,690
an idea for trigger load to do's again,

139
00:06:06,690 --> 00:06:08,630
you'll see that really was the case,

140
00:06:08,630 --> 00:06:09,520
the Arbor to do's,

141
00:06:09,520 --> 00:06:11,350
which I updated on the Dom before,

142
00:06:11,350 --> 00:06:13,823
still are gone or updated.

143
00:06:14,900 --> 00:06:17,080
And that's now this decoupled frontend,

144
00:06:17,080 --> 00:06:19,610
which is entirely JavaScript driven

145
00:06:19,610 --> 00:06:21,920
browser side JavaScript driven

146
00:06:21,920 --> 00:06:23,900
for the reasons I explained before

147
00:06:23,900 --> 00:06:27,800
and that is how we can connect it to our backend API,

148
00:06:27,800 --> 00:06:31,780
which now also shows us one possible use case for building

149
00:06:31,780 --> 00:06:32,883
such an API.