Ajax - Cross-Origin Request Blocked in Laravel?

By Hardik Savani November 5, 2023 Category : Laravel jQuery Angular Ajax

When you make an AJAX request from your Laravel application to another domain or subdomain, the browser may block the request for security reasons. This is known as a "Cross-Origin Request Blocked" error.

To resolve this error, you need to enable CORS (Cross-Origin Resource Sharing) on your Laravel application. CORS is a mechanism that allows resources on a web page to be requested from another domain outside the domain from which the resource originated.

You can enable CORS in Laravel by adding the following code to the app/Http/Middleware/VerifyCsrfToken.php file:

protected $addHttpCookie = true;

protected $except = [

'/*'

];

This code tells Laravel to exclude all routes from CSRF protection, allowing cross-origin requests to be made without being blocked.

You can also use this Alternatively way.

Step 1: Install Compose Package

Alternatively, you can install the barryvdh/laravel-cors package using Composer to enable CORS in your Laravel application. This package provides a middleware that you can add to your Laravel application to allow cross-origin requests. Here are the steps to install and use the package:

Install the package using Composer:

composer require barryvdh/laravel-cors

Step 2: Add Middleware

Add the following code to the $middleware array in the app/Http/Kernel.php file:

\Barryvdh\Cors\HandleCors::class

Step 2: Configure CORS

Add the following code to the config/cors.php file to specify the domains that are allowed to make cross-origin requests:

'allowed_origins' => [

'*',

],

'allowed_methods' => [

'POST',

'GET',

'OPTIONS',

'PUT',

'PATCH',

'DELETE',

],

'allowed_headers' => [

'Content-Type',

'X-Requested-With',

'Authorization',

],

With these steps, you should be able to make cross-origin requests from your Laravel application without encountering the "Cross-Origin Request Blocked" error.

I hope it can help you...

Tags :
Shares