Our first fetch in Vue with CodeIgniter 4 - 07

▶

The next step is to try consuming our application. This list we have here is consumed via GET—spoiler alert—it won't work. We need to configure something additional, but we'll cover that in the next class. Still, it's important to do so to see what happens, and then I'll explain.

So, first we need to launch the application. To do that, we put:

npm run dev

We can actually run multiple commands here, but that's not the point here, as that's a Node thing. I don't want to complicate things too much, but usually when we type this command, it's because we want to run one of the commands defined in package.json. Of course, these can be customized depending on the tool, but in our case, it's not necessary. We simply use dev, as it's the command that's already configured.

Imports by default and by name

Let's recap a bit about exports in JavaScript. Here's an export by name:

import { createApp } from 'vue'

When we use curly braces ({}), it means we're importing a module by name. It may not be clear where this export is, as it may be "hidden" within another module.

This, however, is a default export:

import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';

When you see no curly braces, it's a default export. In this course, we'll primarily use default exports because that's how components work in Vue.

Components exports by default

HTTP requests with fetch and promises

To make HTTP requests, we have the fetch API, which is available in vanilla JS:

console.log(fetch('http://code4movies.test/api/pelicula'))

We'll see that it prints <PROMISE>, as I mentioned earlier. Additionally, we'll see an error like this:

Access to fetch at 'http://code4movies.test/api/pelicula' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So, you can see why it doesn't work. Notice that fetch returns a promise. We can solve it with .then():

fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))

Whatever those languages ​​implement it in this case JavaScript and that is why with this syntax you can place it like this with parentheses if there are many parameters or without, I mean you can place it like this with parentheses if there are several parameters or you can do without them if it is only one parameter:

param => expression
(param) => expression
(param1, paramN) => expression

CORS error in CodeIgniter 4

In CodeIgniter 4, by default, it does not allow connecting external applications, such as Vue, when doing the previous fetch, we will see:

Access to fetch at 'http://code4movies.test/api/pelicula' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

We're encountering an error, as you can see. However, what's happening here isn't clear anymore: the response is supposed to be there, but nothing is returned. So it's clear that a problem has occurred, and the browser clearly tells us what's going on.

You can easily search for these types of errors online—copying and pasting the message helps a lot—but essentially, what's happening here is a CORS (Cross-Origin Resource Sharing) issue.

Although it sounds a bit complicated, what we're basically trying to do is exchange resources (data, information) between applications on different domains. For example, your Vue application is running on localhost:5173 and is trying to consume resources from code4movies.test, which is a different domain.

And this is where the security policy comes in: by default, CodeIgniter 4 doesn't allow these types of external connections. Why? Because it would be a huge risk to allow any application (developed by anyone) to freely make requests to our API without any authorization.

You can even make requests from anywhere in the browser to any path in the application, including the root. And of course, if there were no restrictions, any malicious site could easily exploit this.

That's why these policies are in place to protect you. From CodeIgniter 4's perspective, your Vue application is seen as a potential attacker trying to consume resources without permission. Therefore, the API is protected and blocks the request.