In this lecture, we are going to address the cross origin issues on our app.
The fix is relatively simple.
We need to tell our server to permit our app to load images.
There is another change we need to make before we update the server.
Let's perform an update in our template.
It's going to be quick and your editor open the eclipse list template file.
In this file search for the image tank.
We're going to add an attribute called Cross Origin.
The Cross Origin attribute will inform the browser of a resource located at an external resource, we
need to add this attribute whenever we're trying to retrieve resources on cross origins.
For example, the home page has a video playing in the background of the introduction section.
This video originates on the same server.
We don't need to apply the cross origin attribute on this video.
On the other hand, our images will need this attribute.
They're stored on Firebase is server.
All right, let's start updating fire bases servers.
Let's take a moment to talk about Firebase servers.
Firebase is a product owned by Google.
It may seem like our app is hosted on Firebase, but that's not completely true.
In reality, our app's data is hosted on Google Cloud Infrastructure.
You can think of Firebase as an additional layer.
If we were to directly host our app on Google, we would need to configure the cloud by using Firebase.
Configuration and optimization are performed for us.
It's a very convenient product.
So far, we haven't heavily configured Firebase.
Besides adding some rules in this lecture that's about to change, adding headers is not configurable
through Firebase.
We must dig into our Google Cloud account to add them.
The first step is to create a file with our configuration settings in the root directory of our project.
Let's create a file called Cause Dot JSON.
Google Cloud platform can read the caused JSON file for configuring its cross origin settings inside
this file.
We can configure our servers headers by adding an array with an object.
We're going to add four properties.
The first property is called Origin.
The origin property is an array of domains allowed to download resources from our server.
For example, if we were to add example dot, this site would become allowed to load resources from
our server.
You can add as many origins as you'd like.
If you have a lot of domains, you may want to use a wildcard character.
The wild card character allows for any origin to download resources from our server.
This option may be riskier if you have sensitive resources for our app.
We have images and videos.
There's nothing sensitive being hosted on our servers.
A wildcard character will be suitable for the origin.
The next property to add is called response headers.
The response headers property is an array of headers that can be added to the response in this array.
We're going to add a header called content type.
The content type header stores, the mime type of a file, the browser is going to need this information
for correctly rendering a file on the page.
We should allow this header to be added to the response.
Otherwise, we may encounter errors.
The next property is called methods.
The methods property is an array of valid methods, and this array we will restrict requests to get
methods if the user attempts to grab a resource with a delete or post method.
Their requests will be rejected.
The last property is called Max aged seconds.
We can limit how long browsers can perform a request before it needs to repeat a request.
The value for this property is measured in seconds for most applications.
Setting this property's value to 3600 is normal.
The final we've created will configure the settings for Google Cloud Storage Service.
It will instruct the cloud on how to handle cross origin requests.
The last step is to upload this file to the cloud.
In the resource section of this lecture, I provide a link to an installation page for a tool called
G.S. Utility.
This tool is a Python program for communicating with Google Cloud Services through the command line.
We can upload our configuration settings with this tool.
It's capable of connecting to your cloud projects.
In most cases, you should be able to connect to your Firebase account.
Since Firebase projects are hosted on Google, I want you to go through the installation instructions
on this page.
This tool can be installed on various operating systems.
Be sure to select the operating system relevant to you.
If you are on a Windows machine like me, you can download an executable to run through the installation.
The installation process is like installing any other program.
During installation, you will be asked to connect your Google account.
It may ask you to select a project if possible.
Select the project from your Firebase account.
If you can't, that's fine.
We'll be able to manually select a project with the command line.
I'm going to run through the installation on my own.
I want you to do the same.
Welcome back, hopefully you were able to install this tool without a problem.
Let's verify our installation with the command line.
You will need to restart your command line if you had it opens during installation.
If you're using the command line in your ED, restart the editor inside the command line.
Let's run the following command Gesu till version.
After a few moments, the version of the tool should be outputted if the version gets logged, you're
good to go.
The commander we're going to run is the following GSU till cause set cause Jason.
This command will upload our configuration to Google's servers.
There's one piece of information missing from the command.
We must provide a valid URL to Google's storage in your browser.
Navigate to the storage service in the Firebase console.
On this page, Firebase will provide a full URL to your storage.
It starts with a protocol called G.S..
This full URL must be copied over to our command.
Conveniently, Firebase provides an easy way to copy the URL by clicking on the clip icon.
You should be given a confirmation message after clicking on it.
Let's go back to the command line.
At the end of the command, paste in the URL.
After doing so, run the command.
Well, receive a success message from the tour.
We should finally be able to view our images on the app.
I had my server turned off during this process.
I'm going to quickly turn it on with the Nji Serve Command.
Let's check out our app in the browser.
The images are rendering perfectly on the page.
We have successfully given our app permission to download images from an external resource.
Our timestamps are still giving us an issue.
Let's address this problem in the next lecture.