Laravel 9 - CORS is not working (Access to XMLHttpRequest has been blocked by CORS policy)

Question

I am trying to build a separated frontend web application using Vuejs and fetching data from Laravel 9 API that I have built, when I try to access the data from the frontend that is the response in the browser console:

Access to XMLHttpRequest at 'http://localhost:8000/api' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The backend code (Laravel 9)

1- api.php file

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Models\User;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::get('/', function () {
    $users = User::all();
    return response()->json($users, 200);
});

2- cors.php file (default configurations)

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

The frontend code (Vuejs)

> 1- main.js file (contains vue setup code)

import { createApp } from 'vue'

import axios from 'axios'
import VueAxios from 'vue-axios'

import App from './App.vue'

const app = createApp(App)

app.use(VueAxios, axios)
app.mount('#app')

2- Users.vue (component that fetches the data)

<template>
  <div class="users">
    test
    <button @click="getUsers()">Get Users</button>
    {{ users }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    }
  },
  methods: {
    getUsers() {
      this.axios.get('http://localhost:8000/api').then((response) => {
        // this.users = response;
        // console.log(this.users);
        console.log(response);
      }).catch(err => console.log('error: ' + err));
    }
  }
}

update: more illustration

I have used a google extension that allow CORS for the browser and the extension add the following headers to response automatically:

a) access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONS

b) access-control-allow-methods: *

but I think it is not a solution to use an extension as I want to solve the problem for the production not only in the debugging mode

and the following are some screenshots of the response in the browser.

1- CORS error response in the browser

2- number of the header responses before enabling the extension (only 9 headers):

3- details of header responses before enabling the extension (only 9 headers):

4- number of the header responses after enabling the extension ( 11 headers):

5- Details of the header responses after enabling the extension ( 11 headers)

Answer 1

I find a solution for my problem, I was trying to fetch data from http://localhost:8000/api and when I checked cors.php file I find the paths key contains 2 values like the following:
'paths' => ['api/*', 'sanctum/csrf-cookie']
so like I said I was navigating to api path not api/* only so the array should contain a value of the 'api' like the following:
'paths' => ['api/*', 'sanctum/csrf-cookie', 'api']

Answer 2

I personally had the same problem when connecting NuxtJs to Laravel API. In Laravel cors.php file all I had done was set the value of 'supports_credentials' to true. The default value was 'false'. I hope it saves up your time.

Answer 3

I have found a unique issue regarding the CORS issue.

I don't find any CORS issue on the server side in Laravel 9.

I have found an issue on the client-side.

If you don't include the request header: Accept: application/json then your request will get a 302 Found redirect response code and that's where you will get a CORS error.

I hope this will save your time. :)

Answer 4

Add a new Middleware app\Http\Middleware\Cors.php

namespace App\Http\Middleware;

use Closure;

class Cors {
    
    public function handle($request, Closure $next) {
        
        $response = $next($request);
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'POST, GET');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application', 'ip');
        return $response; 
    }
}

add this line into app\Http\Kernel.php

protected $middleware = [
         .....,
        \App\Http\Middleware\Cors::class,
    ];