You can't share resources between two servers or domains, right? So, if you're stumped by this riddle, we've got a solution for you.
In this article, I'll show you how to enable and interact with CORS (Cross-Origin Resource Sharing) in Laravel. CORS can be installed and configured to fix the missing CORS header 'access-control-allow-origin' issue.
Generally, this problem happens when a request is made from a different server or origin due to a lack of security consensus between two servers. We normally get a warning that says "No 'Access-Control-Allow-Origin' header is present on the requested page." CORS is a protocol that allows two domains to communicate with each other.
CORS (cross-origin resource sharing) is a method that permits restricted web page resources to be requested from a domain other than the one that supplied the first resource.
Table of Content
- Laravel CORS Example
- CORS Middleware Nitty-Gritty
- Create API in Laravel
- Make Http GET Request with AJAX
- Malevolent Laravel CORS Error
- Installing CORS Package in Laravel
- Registering CORS Middleware
1. laravel CORS Example
How can you make your REST API backend CORS compliant? We must first install a new Laravel application.
composer create-project laravel/laravel laravel-cors-tutorial --prefer-distAdd the following to the project folder:
cd laravel-cors-tutorialIf you already have the app installed, skip this step and run the command to begin testing CORS in the Laravel app.
php artisan serve2. CORS Middleware Nitty-Gritty
The config/cors.php file is generated along with the new app installation. Laravel supports the following cors setups.
- CORS configuration paths
- Allowed methods
- Allowed origins patterns
- Allowed headers
- Exposed headers
- Max age
- Supports credentials
<?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' => [],
'max_age' => 0,
'supports_credentials' => false,
];3. Create API in Laravel
We need one to enable CORS in API, thus go to routes/api.php and paste in the code below.
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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('/demo-url', function (Request $request) {
return response()->json(['Laravel CORS Demo']);
});4. Make Http GET Request with AJAX
AJAX will be used to send the Http GET request. Create a new HTML template and call it demo.html. To receive the response, use the jQuery CDN link, define the AJAX method, and pass the Laravel API.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Laravel CORS Middleware Demo</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$.ajax({
type: "GET",
dataType: "json",
url: 'http://localhost:8000/demo-url',
success: function (data) {
console.log(data);
}
});
</script>
</body>
</html>5. Malevolent Laravel CORS Error
Because we have two separate domains attempting to exchange data, a CORS related error (No 'Access-Control-Allow-Origin' header is present on the requested resource.) happened. And, yeah, we haven't even turned on CORS.
Access to XMLHttpRequest at 'http://localhost:8000/demo-url' from origin 'null'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource.6. Installing CORS Package in Laravel
Now that we know what the problem is, we can focus on treating it. Simply install the fruitcake/laravel-cors package using Composer.
composer require fruitcake/laravel-cors7. Registering CORS Middleware
In your Laravel application, we've included the crucial CORS (Cross-Origin Resource Sharing) headers support. Now we must set it up in our application.
Finally, in the app/Http/Kernel.php file, add the FruitcakeCorsHandleCors class at the top of the $middleware array to enable CORS for all our routes.
protected $middleware = [
\Fruitcake\Cors\HandleCors::class,
// ...
// ...
];To deal with resource sharing on several domains, we implemented CORS in Laravel.
I hope you will like the content and it will help you to learn laravel CORS Example: How to Enable CORS in Laravel?
If you like this content, do share.
