1
00:00:02,029 --> 00:00:03,910
To see this in action,

2
00:00:03,910 --> 00:00:07,140
I can use this Live Server extension,

3
00:00:07,140 --> 00:00:10,300
which we used earlier in this course already,

4
00:00:10,300 --> 00:00:11,563
to open this page.

5
00:00:13,120 --> 00:00:15,460
Now, if you do that, you will notice

6
00:00:15,460 --> 00:00:18,913
that the page that loads greets you with an error.

7
00:00:19,870 --> 00:00:22,030
And if you open the developer tools,

8
00:00:22,030 --> 00:00:24,810
you should see an error message there.

9
00:00:24,810 --> 00:00:27,320
We can ignore the first one about the favicon.

10
00:00:27,320 --> 00:00:28,700
This is not important to us.

11
00:00:28,700 --> 00:00:32,040
Here, the browser just tries to fetch a little icon

12
00:00:32,040 --> 00:00:34,070
that's shown next to the title here in the tab.

13
00:00:34,070 --> 00:00:35,630
We can ignore this.

14
00:00:35,630 --> 00:00:39,120
But the more important error message is this one here.

15
00:00:39,120 --> 00:00:43,740
Access to fetch at this domain we're sending the request to,

16
00:00:43,740 --> 00:00:46,760
from origin, this domain here

17
00:00:46,760 --> 00:00:48,620
on which our front-end code runs,

18
00:00:48,620 --> 00:00:53,050
has been blocked by CORS policy, and so on.

19
00:00:53,050 --> 00:00:55,730
Now, what is a CORS policy?

20
00:00:55,730 --> 00:00:59,340
And what's blocking our request here?

21
00:00:59,340 --> 00:01:04,290
Now, CORS stands for Cross-Origin Resource Sharing,

22
00:01:04,290 --> 00:01:07,750
and it's a browser mechanism that allows servers

23
00:01:07,750 --> 00:01:12,040
to indicate which origins, which simply means domains,

24
00:01:12,040 --> 00:01:15,790
may access the resources provided by the server.

25
00:01:15,790 --> 00:01:18,330
Now, it's super important to keep in mind

26
00:01:18,330 --> 00:01:20,670
that it's a browser mechanism.

27
00:01:20,670 --> 00:01:22,770
As you saw before with Postman,

28
00:01:22,770 --> 00:01:25,230
where we interacted with the same API,

29
00:01:25,230 --> 00:01:27,220
we got no errors there.

30
00:01:27,220 --> 00:01:30,120
We could use the Postman client without issues.

31
00:01:30,120 --> 00:01:32,630
Now that we're trying to use a web client,

32
00:01:32,630 --> 00:01:35,060
a different page running on a different server,

33
00:01:35,060 --> 00:01:36,640
we are getting errors

34
00:01:36,640 --> 00:01:39,000
because it's a browser-based mechanism.

35
00:01:39,000 --> 00:01:41,680
It's the browser that's blocking the request here,

36
00:01:41,680 --> 00:01:44,163
not our server or anything like this.

37
00:01:45,580 --> 00:01:47,130
Now, it's this browser mechanism,

38
00:01:47,130 --> 00:01:49,640
and it's kind of a security mechanism,

39
00:01:49,640 --> 00:01:51,700
but since it only applies to the browser

40
00:01:51,700 --> 00:01:54,020
and over clients can send requests,

41
00:01:54,020 --> 00:01:56,120
it's not really a security mechanism

42
00:01:56,120 --> 00:01:58,180
on which you should rely.

43
00:01:58,180 --> 00:02:00,780
The idea is that if you're building a site,

44
00:02:00,780 --> 00:02:03,920
you can't just start using web APIs

45
00:02:03,920 --> 00:02:07,620
or services provided by other users, other developers

46
00:02:07,620 --> 00:02:10,960
unless they unlocked their APIs and services

47
00:02:10,960 --> 00:02:15,740
for usage by other sites, by other origins therefore.

48
00:02:15,740 --> 00:02:18,600
Now, by default, if you have a server A,

49
00:02:18,600 --> 00:02:21,710
let's say localhost:3000, which is our back-end server,

50
00:02:21,710 --> 00:02:26,450
then the resources of that server can be requested

51
00:02:26,450 --> 00:02:30,290
by this same domain only, so that would work.

52
00:02:30,290 --> 00:02:33,300
So if we had a front-end running on server A,

53
00:02:33,300 --> 00:02:36,980
that front-end could send JavaScript driven requests

54
00:02:36,980 --> 00:02:41,880
to the routes, to the end points provided by server A,

55
00:02:41,880 --> 00:02:44,940
and we could request the data from there.

56
00:02:44,940 --> 00:02:46,890
That's what we did before in the course

57
00:02:46,890 --> 00:02:50,060
when we, for example, used Ajax in the online shop.

58
00:02:50,060 --> 00:02:52,780
There, we had no problems sending requests

59
00:02:52,780 --> 00:02:56,920
with browser-side JavaScript because the request was sent

60
00:02:56,920 --> 00:02:59,560
by a page served by the same server

61
00:02:59,560 --> 00:03:01,703
as was used for serving the back-end.

62
00:03:02,950 --> 00:03:05,040
Now, here we have a different case.

63
00:03:05,040 --> 00:03:08,220
We now have a different server that serves the front-end,

64
00:03:08,220 --> 00:03:12,740
on localhost:5500, for example, which is localhost,

65
00:03:12,740 --> 00:03:15,520
but since it's a different port, it's a different domain.

66
00:03:15,520 --> 00:03:17,340
And of course, you could also translate

67
00:03:17,340 --> 00:03:20,720
these localhost domains to real domains

68
00:03:20,720 --> 00:03:24,800
if you would host these websites on real hosting providers,

69
00:03:24,800 --> 00:03:28,610
like example.com and mypage.com.

70
00:03:28,610 --> 00:03:30,670
So we have two different domains here

71
00:03:30,670 --> 00:03:33,900
which are hosting two different sites in the end.

72
00:03:33,900 --> 00:03:36,640
Server A is hosting the back-end in our case here.

73
00:03:36,640 --> 00:03:39,110
In that case, server B, by default,

74
00:03:39,110 --> 00:03:42,600
can't request the resources provided by that server.

75
00:03:42,600 --> 00:03:44,600
That's what we're seeing here in the browser

76
00:03:44,600 --> 00:03:46,090
with this error message.

77
00:03:46,090 --> 00:03:48,210
This is not allowed.

78
00:03:48,210 --> 00:03:49,980
Now, that's the default.

79
00:03:49,980 --> 00:03:52,120
As a developer, you can change it though,

80
00:03:52,120 --> 00:03:56,120
but only as the developer of the back-end code,

81
00:03:56,120 --> 00:03:58,950
because the idea is that the browser ensures

82
00:03:58,950 --> 00:04:02,270
that other sites can't just start using APIs

83
00:04:02,270 --> 00:04:04,800
by other developers without the permission

84
00:04:04,800 --> 00:04:05,940
of those developers.

85
00:04:05,940 --> 00:04:08,180
Therefore, of course, it's the developers

86
00:04:08,180 --> 00:04:10,230
of the back-end of the API

87
00:04:10,230 --> 00:04:12,930
that have to give those permissions.

88
00:04:12,930 --> 00:04:15,410
Hence, you can only change CORS behavior

89
00:04:15,410 --> 00:04:17,079
in the back-end code.

90
00:04:17,079 --> 00:04:18,570
And you can change it there

91
00:04:18,570 --> 00:04:20,910
by setting different response headers,

92
00:04:20,910 --> 00:04:24,120
and only by setting different response headers.

93
00:04:24,120 --> 00:04:26,480
You can set any request headers you want

94
00:04:26,480 --> 00:04:29,950
on the front-end site that wants to access a resource.

95
00:04:29,950 --> 00:04:31,820
You can't unlock it there.

96
00:04:31,820 --> 00:04:34,770
Only the back-end can allow access

97
00:04:34,770 --> 00:04:37,990
by setting proper response headers.

98
00:04:37,990 --> 00:04:41,290
And there, we got three main headers

99
00:04:41,290 --> 00:04:43,700
which we can set on the back-end,

100
00:04:43,700 --> 00:04:45,820
Access-Control-Allow-Origin,

101
00:04:45,820 --> 00:04:47,840
Access-Control-Allow-Methods,

102
00:04:47,840 --> 00:04:50,610
and Access-Control-Allow-Headers.

103
00:04:50,610 --> 00:04:53,150
Now, with Access-Control-Allow-Origin,

104
00:04:53,150 --> 00:04:56,760
we control which origins, so which other domains,

105
00:04:56,760 --> 00:04:58,820
may request resources.

106
00:04:58,820 --> 00:05:00,810
And by default, it's only the domain

107
00:05:00,810 --> 00:05:03,180
which provided the resources.

108
00:05:03,180 --> 00:05:05,920
That's what I explained a few seconds ago.

109
00:05:05,920 --> 00:05:08,430
We can change it on the back-end though.

110
00:05:08,430 --> 00:05:12,520
We can then also set which HTTP methods we wanna allow,

111
00:05:12,520 --> 00:05:13,830
GET, POST, PATCH.

112
00:05:13,830 --> 00:05:15,630
We can control on the server

113
00:05:15,630 --> 00:05:17,960
which kind of requests we wanna allow

114
00:05:17,960 --> 00:05:20,313
to be sent to our back-end API.

115
00:05:21,590 --> 00:05:24,150
And we can also set which extra headers,

116
00:05:24,150 --> 00:05:27,400
besides some default headers which are always allowed,

117
00:05:27,400 --> 00:05:29,353
we wanna allow on the back-end.

118
00:05:30,440 --> 00:05:31,750
Now, that's the theory.

119
00:05:31,750 --> 00:05:33,050
Let's now implement this,

120
00:05:33,050 --> 00:05:36,170
and let's see how we can make our front-end here

121
00:05:36,170 --> 00:05:38,193
work with our back-end API.