Now, since recording the previous episode, I've finally finished up all of the remaining pages behind the scenes. But now let's figure out how to deal with crosswords and requests. So as an example, I'm not sure if we'll keep this, honestly, but it gives us something to work with. Let's imagine we want a third tier for stats. This might be global stats, it might even be user-specific stats. Okay, let's go ahead and set this up quickly. So I'll go to my layout file, we'll scroll down, we will add another section here, and this will be for stats.

So I'll go to my layout file, we'll scroll down, we will add another section here, and this will be for stats. And like I said, we'll start with, let's start with global stats, and then we'll do user stats in the next episode. All right, and that will go to siteStats. And finally, let's give it some margin at the bottom. Okay. So if I come back to Chrome and give it a refresh, now we have our new section. But we have to set up the component for that. All right, open up the sidebar, resources, js, components, and we called this siteStats.

But we have to set up the component for that. All right, open up the sidebar, resources, js, components, and we called this SiteStats. Is that right? And then our script. Okay, so let me grab the logo here, paste that in, and we'll say Laracast Stats. Finally, I just need to register it as a route. So we'll pull it in here. And then if I scroll down to the bottom, we'll add it there. Okay, basic routine at this point. So if I now switch back to Chrome and I give it a refresh, we now have our page.

In this case, it just happens to be the main Layercast website, but in real life, it could be GitHub. It could be any API that has the data you need. So now we're going to switch over to a different code base, the Layercast code base, so I can show you how to set this up. I'm going to visit my routes/api.php file. At the moment, it's blank. Let's set one up. So we'll say if you visit /stats, that's going to load the stats for the site. And just to keep it simple, we're going to hard code this data.

So we'll say if you visit /stats, that's going to load the stats for the site. And just to keep it simple, we're going to hard code this data. So you'll remember we needed the series. We'll just say, I don't know, 200. lessons is 1300. Now do note, because we're in our API routing file, we'll have the API middleware applied, so that will add some throttling and some bindings, and it will also add the API prefix. So for example, if you want to see this, we would actually visit layercast.test/api/stats, and then there we go. We get our information.

API slash stats, and then there we go. We get our information. But now it's not just as simple as making an AJAX request to this. So let's do this. I'm now going to switch back to our main assets website. I'm no longer in the Laracasts code base, and we'll say when this component is created, we're going to make an Axios request to that endpoint. And then we'll just say then console.log the response that you get. Okay, but a few things here that we'll have to address. And immediately if we visit the site stats, there should be some issues.

Okay, but a few things here that we'll have to address. And immediately if we visit the site stats, there should be some issues. Let's go to the console. Okay, yeah. So Axios is not defined. That's because you'll see here we kind of simplified things, and at no point do we pull in Axios. Now you may know Laravel includes some bootstrap information here that we could make use of. Okay, so with that in mind, let's say at the very top import our bootstrap file. Or we could migrate it all over here, it doesn't matter.

So we'll end up with something like that. So actually with that in mind, let's just go ahead and migrate over. And then we'll say import Axios from 'axios', and then we'll assign it globally. All right, and that is what we get, and I can delete the bootstrap file. So now if I switch back to Chrome and we give it another refresh, we change the error. So this is something you will often run into, and if you don't know what the issue is, it's very confusing. So notice our XMLHttpRequest, our HX request, from this origin, assets.test, has been blocked by the CORS policy. Response to preflight request doesn't pass the access control check.

Or you could say, all right, I will respond to GET requests, but I'm not going to communicate and provide any data for a DELETE request or a PATCH request. So it gives us just a little bit more control who we communicate with. So in this case, assets.test is trying to communicate with layercast.test, and that's on a different origin. And by default, again, it's blocked. We can't have that conversation yet. Let's fix that. I'm now going to switch over to the layercast code base, and I'm going to create the middleware here.

I'm now going to switch over to the layercast code base, and I'm going to create the middleware here. php artisan make:middleware CORS, all right? And we'll open that up. And what we'll do here is say, return to the next layer of the onion, but I'm going to add a header. So let's grab the header, and let's just do it one at a time. So it's saying, all right, no Access-Control-Allow-Origin header has been set, OK? Let's make the server set that. Now you have a couple options.

access control allow headers, and again, you can be wide open or you can be specific that you can accept that. OK, so now if we give it one more try, there we go. Now we can communicate from a different origin because it's specifically allowed. OK, so now if I take a look at our response data, we see that information and we can make use of it. So let's go back to siteStats and we could say with the response, and then here we could say this.series is response.data.series, or we could do it up here. Let's just do let data equals the response, and that way we can just grab that object directly.

Let's just do this, let data equals the response, and that way we can just grab that object directly. OK, let's take a look. If I come back to Chrome and refresh the page, there we go. So I know that's a little tricky, and often when you're communicating with a server like GitHub, they will already have these headers set up. So that is obviously you're not having to deal with that. But yeah, you may find when communicating with your own server that's hosted on a different domain, you will need to worry about this. So you can take this very simple approach, or there are dedicated Laravel course packages.

In the next episode, we'll take things another step further. What if the data you're fetching is more sensitive and it's not publicly accessible? Well, in these situations, you'll need some kind of API token that you can provide along with the request.