What is CORS and How to Handle it?

Now, let's talk about Cross-Origin Resource Sharing (CORS). It seems like a very complicated topic. You can read about it in the developer.mozilla.org, but I will try to summarize it in the shortest possible way.

By default, in Laravel, you don't need to change anything, but you need to understand where to look if something goes wrong.

CORS isn't a Laravel or a PHP thing. It's how the browsers work. By default, if you try to open one resource from another domain resource, it's usually about web domains, you may run into a CORS error:

In Laravel, CORS settings are set in the config/cors.php file; by default, it allows everything.

I have closed the same Vue.js project into a different directory. So now, I have project.test as a frontend and demo.test as an API. I changed the API call to use the different domains in the Vue component.

<template>
    // ...
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { TailwindPagination } from 'laravel-vue-pagination';
 
const categories = ref({})
const products = ref({})
 
const getCategories = async () => {
    await axios.get('http://demo.test/api/categories') 
        .then(response => {
            categories.value = response.data.data
        })
        .catch((error) => console.log(error))
}
 
const getProducts = async (page = 1) => {
    await axios.get(`http://demo.test/api/products?page=${page}`) 
        .then(response => {
            products.value = response.data
        })
        .catch((error) => console.log(error))
}
 
onMounted(() => {
    getCategories()
    getProducts()
})
</script>

As you can see, the frontend domain is different from the API.

If we publish the cors config php artisan config:publish cors and set the allowed_origins to allow nothing, we will get an error, and the page will be broken.

config/cors.php:

return [
 
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
 
    'allowed_methods' => ['*'],
 
    'allowed_origins' => [], 
 
    'allowed_origins_patterns' => [],
 
    'allowed_headers' => ['*'],
 
    'exposed_headers' => [],
 
    'max_age' => 0,
 
    'supports_credentials' => false,
 
];

The same would happen if you changed, for example, paths in the config/cors.php from 'api/*' to 'api/v2/*'.

Uploading files via API Authentication Overview: Sanctum, Passport or JWT?

Course Content

How to Build Laravel 11 API From Scratch

What is CORS and How to Handle it?

Course Content

Getting Data via Laravel API

Posting Data via Laravel API

Authentication and Authorization

Additional Various Topics