1
00:00:00,210 --> 00:00:04,710
In this lecture, we are going to address the cross origin issues on our app.

2
00:00:05,070 --> 00:00:06,900
The fix is relatively simple.

3
00:00:07,140 --> 00:00:10,860
We need to tell our server to permit our app to load images.

4
00:00:11,160 --> 00:00:14,880
There is another change we need to make before we update the server.

5
00:00:14,970 --> 00:00:17,220
Let's perform an update in our template.

6
00:00:17,580 --> 00:00:22,680
It's going to be quick and your editor open the eclipse list template file.

7
00:00:25,130 --> 00:00:27,740
In this file search for the image tank.

8
00:00:30,180 --> 00:00:33,210
We're going to add an attribute called Cross Origin.

9
00:00:35,770 --> 00:00:42,550
The Cross Origin attribute will inform the browser of a resource located at an external resource, we

10
00:00:42,550 --> 00:00:48,280
need to add this attribute whenever we're trying to retrieve resources on cross origins.

11
00:00:48,700 --> 00:00:54,520
For example, the home page has a video playing in the background of the introduction section.

12
00:00:54,880 --> 00:00:57,370
This video originates on the same server.

13
00:00:57,640 --> 00:01:01,600
We don't need to apply the cross origin attribute on this video.

14
00:01:02,170 --> 00:01:05,500
On the other hand, our images will need this attribute.

15
00:01:05,680 --> 00:01:07,810
They're stored on Firebase is server.

16
00:01:08,320 --> 00:01:11,770
All right, let's start updating fire bases servers.

17
00:01:12,040 --> 00:01:15,220
Let's take a moment to talk about Firebase servers.

18
00:01:17,750 --> 00:01:20,030
Firebase is a product owned by Google.

19
00:01:20,330 --> 00:01:24,770
It may seem like our app is hosted on Firebase, but that's not completely true.

20
00:01:25,070 --> 00:01:29,810
In reality, our app's data is hosted on Google Cloud Infrastructure.

21
00:01:30,170 --> 00:01:33,020
You can think of Firebase as an additional layer.

22
00:01:33,410 --> 00:01:39,860
If we were to directly host our app on Google, we would need to configure the cloud by using Firebase.

23
00:01:40,100 --> 00:01:43,520
Configuration and optimization are performed for us.

24
00:01:43,790 --> 00:01:45,590
It's a very convenient product.

25
00:01:45,860 --> 00:01:49,100
So far, we haven't heavily configured Firebase.

26
00:01:49,100 --> 00:01:56,030
Besides adding some rules in this lecture that's about to change, adding headers is not configurable

27
00:01:56,030 --> 00:01:57,080
through Firebase.

28
00:01:57,440 --> 00:02:00,920
We must dig into our Google Cloud account to add them.

29
00:02:03,600 --> 00:02:09,870
The first step is to create a file with our configuration settings in the root directory of our project.

30
00:02:10,050 --> 00:02:13,260
Let's create a file called Cause Dot JSON.

31
00:02:15,860 --> 00:02:23,400
Google Cloud platform can read the caused JSON file for configuring its cross origin settings inside

32
00:02:23,420 --> 00:02:24,110
this file.

33
00:02:24,290 --> 00:02:28,610
We can configure our servers headers by adding an array with an object.

34
00:02:30,850 --> 00:02:33,040
We're going to add four properties.

35
00:02:33,340 --> 00:02:35,590
The first property is called Origin.

36
00:02:38,190 --> 00:02:43,830
The origin property is an array of domains allowed to download resources from our server.

37
00:02:44,160 --> 00:02:50,640
For example, if we were to add example dot, this site would become allowed to load resources from

38
00:02:50,640 --> 00:02:51,330
our server.

39
00:02:51,720 --> 00:02:54,120
You can add as many origins as you'd like.

40
00:02:54,450 --> 00:02:58,680
If you have a lot of domains, you may want to use a wildcard character.

41
00:03:01,230 --> 00:03:06,570
The wild card character allows for any origin to download resources from our server.

42
00:03:06,960 --> 00:03:11,700
This option may be riskier if you have sensitive resources for our app.

43
00:03:11,820 --> 00:03:13,770
We have images and videos.

44
00:03:14,160 --> 00:03:17,040
There's nothing sensitive being hosted on our servers.

45
00:03:17,370 --> 00:03:20,850
A wildcard character will be suitable for the origin.

46
00:03:21,540 --> 00:03:24,840
The next property to add is called response headers.

47
00:03:27,370 --> 00:03:33,640
The response headers property is an array of headers that can be added to the response in this array.

48
00:03:33,850 --> 00:03:36,550
We're going to add a header called content type.

49
00:03:39,190 --> 00:03:45,550
The content type header stores, the mime type of a file, the browser is going to need this information

50
00:03:45,550 --> 00:03:48,310
for correctly rendering a file on the page.

51
00:03:48,700 --> 00:03:51,760
We should allow this header to be added to the response.

52
00:03:52,090 --> 00:03:54,460
Otherwise, we may encounter errors.

53
00:03:54,760 --> 00:03:57,160
The next property is called methods.

54
00:03:59,650 --> 00:04:07,390
The methods property is an array of valid methods, and this array we will restrict requests to get

55
00:04:07,390 --> 00:04:12,550
methods if the user attempts to grab a resource with a delete or post method.

56
00:04:12,820 --> 00:04:14,890
Their requests will be rejected.

57
00:04:15,280 --> 00:04:18,700
The last property is called Max aged seconds.

58
00:04:21,290 --> 00:04:26,030
We can limit how long browsers can perform a request before it needs to repeat a request.

59
00:04:26,360 --> 00:04:30,560
The value for this property is measured in seconds for most applications.

60
00:04:30,740 --> 00:04:34,130
Setting this property's value to 3600 is normal.

61
00:04:37,140 --> 00:04:41,610
The final we've created will configure the settings for Google Cloud Storage Service.

62
00:04:41,940 --> 00:04:45,810
It will instruct the cloud on how to handle cross origin requests.

63
00:04:46,200 --> 00:04:48,930
The last step is to upload this file to the cloud.

64
00:04:49,260 --> 00:04:54,990
In the resource section of this lecture, I provide a link to an installation page for a tool called

65
00:04:54,990 --> 00:04:56,220
G.S. Utility.

66
00:04:58,740 --> 00:05:04,350
This tool is a Python program for communicating with Google Cloud Services through the command line.

67
00:05:04,650 --> 00:05:07,590
We can upload our configuration settings with this tool.

68
00:05:07,950 --> 00:05:10,650
It's capable of connecting to your cloud projects.

69
00:05:10,920 --> 00:05:14,760
In most cases, you should be able to connect to your Firebase account.

70
00:05:14,760 --> 00:05:20,940
Since Firebase projects are hosted on Google, I want you to go through the installation instructions

71
00:05:20,940 --> 00:05:21,780
on this page.

72
00:05:22,110 --> 00:05:25,260
This tool can be installed on various operating systems.

73
00:05:25,590 --> 00:05:28,650
Be sure to select the operating system relevant to you.

74
00:05:29,010 --> 00:05:34,440
If you are on a Windows machine like me, you can download an executable to run through the installation.

75
00:05:34,770 --> 00:05:38,370
The installation process is like installing any other program.

76
00:05:38,910 --> 00:05:42,780
During installation, you will be asked to connect your Google account.

77
00:05:43,080 --> 00:05:46,470
It may ask you to select a project if possible.

78
00:05:46,680 --> 00:05:49,120
Select the project from your Firebase account.

79
00:05:49,440 --> 00:05:50,970
If you can't, that's fine.

80
00:05:51,300 --> 00:05:54,690
We'll be able to manually select a project with the command line.

81
00:05:55,020 --> 00:05:57,420
I'm going to run through the installation on my own.

82
00:05:57,630 --> 00:05:59,190
I want you to do the same.

83
00:06:00,710 --> 00:06:05,270
Welcome back, hopefully you were able to install this tool without a problem.

84
00:06:05,540 --> 00:06:08,540
Let's verify our installation with the command line.

85
00:06:08,810 --> 00:06:13,040
You will need to restart your command line if you had it opens during installation.

86
00:06:13,370 --> 00:06:18,840
If you're using the command line in your ED, restart the editor inside the command line.

87
00:06:18,860 --> 00:06:22,640
Let's run the following command Gesu till version.

88
00:06:25,200 --> 00:06:30,720
After a few moments, the version of the tool should be outputted if the version gets logged, you're

89
00:06:30,720 --> 00:06:31,410
good to go.

90
00:06:31,710 --> 00:06:38,220
The commander we're going to run is the following GSU till cause set cause Jason.

91
00:06:40,850 --> 00:06:44,420
This command will upload our configuration to Google's servers.

92
00:06:44,720 --> 00:06:47,600
There's one piece of information missing from the command.

93
00:06:47,870 --> 00:06:52,640
We must provide a valid URL to Google's storage in your browser.

94
00:06:52,670 --> 00:06:56,090
Navigate to the storage service in the Firebase console.

95
00:06:58,790 --> 00:07:03,260
On this page, Firebase will provide a full URL to your storage.

96
00:07:03,530 --> 00:07:06,170
It starts with a protocol called G.S..

97
00:07:06,470 --> 00:07:09,620
This full URL must be copied over to our command.

98
00:07:09,950 --> 00:07:16,160
Conveniently, Firebase provides an easy way to copy the URL by clicking on the clip icon.

99
00:07:16,550 --> 00:07:19,760
You should be given a confirmation message after clicking on it.

100
00:07:20,090 --> 00:07:21,910
Let's go back to the command line.

101
00:07:24,420 --> 00:07:27,240
At the end of the command, paste in the URL.

102
00:07:29,610 --> 00:07:31,950
After doing so, run the command.

103
00:07:34,420 --> 00:07:37,060
Well, receive a success message from the tour.

104
00:07:37,420 --> 00:07:40,720
We should finally be able to view our images on the app.

105
00:07:40,990 --> 00:07:43,570
I had my server turned off during this process.

106
00:07:43,870 --> 00:07:47,380
I'm going to quickly turn it on with the Nji Serve Command.

107
00:07:49,880 --> 00:07:51,950
Let's check out our app in the browser.

108
00:07:54,570 --> 00:07:57,360
The images are rendering perfectly on the page.

109
00:07:57,540 --> 00:08:02,520
We have successfully given our app permission to download images from an external resource.

110
00:08:02,850 --> 00:08:05,430
Our timestamps are still giving us an issue.

111
00:08:05,730 --> 00:08:08,430
Let's address this problem in the next lecture.