1
00:00:00,300 --> 00:00:06,050
That was nice and easy with the concurrently package, we were able to spin up with the back end and

2
00:00:06,060 --> 00:00:06,630
front end.

3
00:00:07,080 --> 00:00:09,120
But what's up with this course?

4
00:00:09,150 --> 00:00:09,590
Doozy.

5
00:00:09,960 --> 00:00:13,470
And how we can fix that and cause error?

6
00:00:13,620 --> 00:00:20,160
Probably one of the most annoying errors that you will encounter, especially while you are just starting

7
00:00:20,160 --> 00:00:26,400
up with data fetching in JavaScript somewhere because it's not your syntax that's causing it.

8
00:00:26,820 --> 00:00:31,200
Again, let me reiterate the code here is correct.

9
00:00:31,500 --> 00:00:39,810
It's just that we are not indicating on our server any origins from which a browser should permit loading

10
00:00:39,810 --> 00:00:40,530
resources.

11
00:00:40,830 --> 00:00:46,440
And before I show you a great article about it and how we can add the fix.

12
00:00:46,770 --> 00:00:56,040
Let me quickly showcase something where if I were to go to my client and in a public folder, very,

13
00:00:56,040 --> 00:00:57,900
very important in the public folder.

14
00:00:58,470 --> 00:01:04,950
If you're set up data, JSON or pretty much any JSON file for that matter and then add some kind of

15
00:01:04,950 --> 00:01:08,430
dummy code, my is not his name is equal to John.

16
00:01:08,850 --> 00:01:15,420
And if you go back to your dashboard and my cache, I'm going to comment this one out.

17
00:01:15,750 --> 00:01:21,450
The local host 5000 because we'll come back to this one and uncomment my data, Jason.

18
00:01:21,570 --> 00:01:30,920
So essentially, if I'm fetching the contents from data JSON in the use effect now, you'll notice that

19
00:01:30,930 --> 00:01:31,770
everything is correct.

20
00:01:32,010 --> 00:01:34,860
So it may refresh and check it out.

21
00:01:35,130 --> 00:01:37,860
My name is equal to John.

22
00:01:38,370 --> 00:01:48,720
So what I'm trying to reiterate is the fact that when we're getting the data from our own server, essentially

23
00:01:48,720 --> 00:01:52,020
from the same origin, everything is going to work.

24
00:01:52,530 --> 00:01:59,430
The problem is going to be when we're trying to do that from a different server in our script.

25
00:01:59,610 --> 00:02:05,850
Now I also want to point out something where notice when we're fetching something from our own server,

26
00:02:05,970 --> 00:02:07,650
we just go here with forward slash.

27
00:02:07,980 --> 00:02:15,900
And essentially, this just signals to the server, to the React development server that the resource

28
00:02:15,900 --> 00:02:17,730
is in its own backyard.

29
00:02:18,090 --> 00:02:19,480
It's like a forward slash.

30
00:02:19,500 --> 00:02:23,340
OK, I need to go and check for this particular resource.

31
00:02:23,390 --> 00:02:25,920
Now, of course, if it doesn't exist, then it's a different scenario.

32
00:02:26,310 --> 00:02:31,920
But in this case, we do have data, Jason, where we are successfully patching the data.

33
00:02:32,430 --> 00:02:32,910
All right.

34
00:02:33,060 --> 00:02:38,040
So hopefully that's clear, and I'll take a look at the actual error.

35
00:02:38,340 --> 00:02:43,140
So what's causing the core error and two possible fixes that we can use?

36
00:02:43,590 --> 00:02:47,130
And eventually we'll all go with the proxy one with the second one?

37
00:02:47,490 --> 00:02:52,560
I still wanted to include the first one because I know I'm going to get the questions about it, so

38
00:02:52,880 --> 00:02:54,990
might as well get that out of the way.

39
00:02:55,560 --> 00:03:02,850
And if you want to find out more info, multi-course error here I left a link to a great resource,

40
00:03:03,030 --> 00:03:05,160
which is Mozilla of all production.

41
00:03:05,520 --> 00:03:07,440
And let me just read a few sentences.

42
00:03:07,440 --> 00:03:12,570
Don't worry, I'm not going to read the entire article, but essentially cross origin.

43
00:03:12,570 --> 00:03:18,870
Resource sharing or course is an ability b header based mechanism that allows the server.

44
00:03:19,510 --> 00:03:26,610
This is very, very important server to indicate any origins, domain scheme and port other than its

45
00:03:26,610 --> 00:03:31,440
own, from which a browser should permit loading resources.

46
00:03:31,830 --> 00:03:36,750
So again, when we have our own origin, there's no issue.

47
00:03:37,620 --> 00:03:38,880
Everything works like beaches.

48
00:03:39,360 --> 00:03:46,440
The problem starts when we're trying to get something from a different origin and essentially we have

49
00:03:46,470 --> 00:03:50,160
a very, very nice image that showcases that.

50
00:03:50,450 --> 00:03:54,030
And now let me read this and then I'm going to go over this one one more time.

51
00:03:54,300 --> 00:03:58,320
So for security reasons, browsers restrict cross origin.

52
00:03:58,710 --> 00:04:01,650
It should be a request initiated from the script.

53
00:04:02,130 --> 00:04:07,680
Our scenario worked, for example, blah blah blah fetch API follow the same origin policy.

54
00:04:08,130 --> 00:04:13,980
This means that web application using those APIs can only request resources from the same origin the

55
00:04:13,980 --> 00:04:22,440
application was loaded from unless the response from the origins includes the right course arrows and

56
00:04:22,440 --> 00:04:23,760
essentially here to give you that.

57
00:04:24,030 --> 00:04:31,890
You know, if you have domain a online, you have the request a vine unless there's proper headers.

58
00:04:32,130 --> 00:04:38,190
You won't be able to get data from Domain B and more specifically, their JSON.

59
00:04:38,580 --> 00:04:44,430
So essentially something similar that I just showcased here in our court example.

60
00:04:44,760 --> 00:04:47,070
And once we know what is in the air.

61
00:04:47,250 --> 00:04:49,860
Now let's take a look at our two fixes.