Laravel 7/6 CORS Tutorial and Example

In this tutorial, we'll show you how to work with CORS (Cross-Origin Resource Sharing) in Laravel 6/7.

This tutorial shows you how to implement CORS in both Laravel 6 using a third-party package and Laravel 7 which includes a first-party package for CORS support.

Laravel 7 CORS Support

Laravel 7 has been released on March and provides built-in support for CORS so developers don't need to use third party packages to enable CORS in their laravel apps.

According to the official docs:

Laravel 7 includes first-party support for configuring Cross-Origin Resource Sharing (CORS) OPTIONS request responses by integrating the popular Laravel CORS package written by Barry vd. Heuvel. A new cors configuration is included in the default Laravel application skeleton.

For Laravel 6, make sure to continue reading below for a step by step example on how to enable CORS in your REST API backend.

Laravel 7 CORS by Example

Let's now see how CORS is handled in Laravel 7. In fact, you don't need to do much. Open a new command-line interface and start by generating a new Laravel 7 project:

composer create-project --prefer-dist laravel/laravel laravel-7-cors-example

You'll notice that a package called fruitcake/laravel-cors is installed in your project.

Laravel 7 can automatically respond to CORS HTTP OPTIONS requests with values that you can configure.

All CORS settings can be configured in your cors configuration file.

Open the config/cors.php file:

<?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/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => false,

    'max_age' => false,

    'supports_credentials' => false,

];

As you can see you can configure the various aspects of your app such as:

• The paths that will have CORS configured,
• The allowed methods.
• The allowed origins,
• the allowed heades.
• The max age,
• The credentials support.

If you are using custom headers, such as X-Auth-Token, you need to add these headers in the allowed_headers array. You can also use ['*'] to allow all custom headers.

allowed_origins, allowed_headers and allowed_methods can be set to ['*'] to accept any value.

Note: Because of http method overriding in Laravel, If you enable POST methods, users can also send PUT and DELETE requests withour any CORS issues.

The HTTP OPTIONS requests will automatically be handled. Open the App/Http/Middleware/Kernel.php file:

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

The HandleCors middleware is added by default in project's gloabl middlewares.

Laravel 6/7 API Example

Let's get started by creating a simple API route in our Laravel project.

Head over to the routes/api.php file and add the following route.

Route::get('/my-api-endpoint',  function  (Request $request)  {

  return response()->json(['Hello Laravel 7']);

});

Now, if we need to call this API endpoint from another domain, CORS issues will appear.

Sending an Http/Ajax Request

Create new HTML file named index.php inside a separate folder and add the following JavaScript/jQuery code to connect to the Laravel API:

<!DOCTYPE html>
<html>
<head>

  <title>Laravel 6/7 CORS Middleware Tutorial</title>

  <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"  crossorigin="anonymous"></script>

</head>

<body>

<script  type="text/javascript">

  $.ajax({
    type:  "GET",
    dataType:  "json",
    url:  'http://localhost:8000/my-api-endpoint',
    success:  function(data){
        console.log(data);
    }
  });

</script>
</body>
</html>

You can simply run this script using the PHP built-in server as follows:

$ php -S localhost:8080

Now we have two apps running from two different ports: localhost:8080 and localhost:8000 which are considered two different domains.

The CORS Error

If the CORS is not configured properly in the target server, which is in our case, Laravel, we'll face CORS issues which disallows the JavaScript/jQuery code from connecting to the API endpoint for security reasons.

This is the exacte error message that you should see in your browser's console:

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

This simply says that a Access-Control-Allow-Origin header should be present in the requested resource.

Solving the CORS Issues in Laravel 6/7

In Laravel. this can be solved using the barryvdh/laravel-cors package which can be installed using Composer.

Installing and Configuring barryvdh/laravel-cors

Head back to your terminal and make sure you are inside your Laravel 6/7 project then install install the barryvdh/laravel-cors package using the following command:

$ composer require barryvdh/laravel-cors

Next, go to the config/app.php file and update it as follows:

'providers'  =>  [

  [...]

  Barryvdh\Cors\ServiceProvider::class,

],

Next, add the \Barryvdh\Cors\HandleCors middleware to the app/Http/Kernel.php file:

protected $middleware =  [

  [...]

 \Barryvdh\Cors\HandleCors::class,

];

That's it, you now run your Laravel 6/7 application and test your code again which should work without any CORS issues.

• Date: 01 Feb 2020