In this lecture, we are going to fix the issue with our image.
Under normal circumstances, this issue was not common.
We are experiencing issues because of our servers configuration.
To understand why.
Let's talk about a concept called cross origin resource sharing.
First, let's talk about resources on the internet.
A resource can be considered videos, images and even a web page.
They are files downloaded by the browser.
Requesting a resource can be a dangerous business.
If your app downloads a malicious resource, it can spell trouble for your users.
Browsers introduce a set of security policies called Cross Origin Resource Sharing.
It's also known as cause.
The idea of these policies is simple.
Let's say we have a site called site.
A Site A may want to download a JavaScript file from Site A.
It's the same site.
Browsers allow sites to download resources from the same site.
This feature is known as a same origin policy.
It makes complete sense, right?
Apps should be able to download files hosted on the same server.
Let's kick it up a notch.
What if we going to go file from another site?
For example, you may want to store your asset files on a CD, or you may want to grab files from an
external resource like Firebase.
This relationship is known as Cross Origin Policy.
It's when files are hosted on different servers or origins.
Browsers can be lenient with cross origin resources.
For example, loading an image with the image tag doesn't produce many problems.
Most browsers will allow you to embed images without a problem.
And my browser, I'm viewing the home page of our app.
I'm going to quickly inspect the image with the developer tools.
On the source attribute, there's clearly a valid URL.
There doesn't seem to be a problem with the URL.
So why are the images broken on the home page?
The problem lies with our servers, headers in the angular JSON file, we added headers to the development
server.
One of them was called cross origin and better policy.
This policy enforces stricter standards on our app.
It does not allow our app to load cross origin resources without permission.
Our images are hosted on Firebase is server.
By default, their servers do not permit other origins to download their resources.
To be clear, they don't have to.
In most scenarios, you can embed images on your app without permission.
However, since we're adding this header, the browser wants explicit permission.
It doesn't care if the images can be loaded without permission.
The browser demands permission.
Here's where things get challenging.
It's easy to add headers to our development server.
This time, we need to add headers to Firebase is servers, which is another story.
Working with servers is a back and developer job.
If you're on a team, you would communicate with your back and developer to fix this for you.
Unfortunately, we're working independently.
We don't have much of a choice but to take on the role of a backend developer.
We can give permission by adding a header called Access Control Allow Origin.
There's header can be set to a domain.
Alternatively, we can set this header to a wildcard character.
This value allows for any app to download files.
I find it easier to use wildcard characters in the next lecture.
We're going to begin updating Firebase servers to add this header.