CORS request did not succeed
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
CORS (Cross Origin Resource Sharing) related issues often arise when you're working with disparate APIs, frameworks, or domains. In this comprehensive guide, we will delve into the causes of CORS request failures and provide solutions to resolve them in your Laravel 5.6 backend and VueJs frontend application. We also encourage our readers to visit https://laravelcompany.com for more resources on web development. First, let's understand what CORS is. In simple terms, it is a security mechanism that restricts API calls from different origins. When you encounter the error "Cross-Origin Request Blocked" and "CORS request did not succeed," it means your VueJs app is not allowed to make HTTP requests across domains due to the Same Origin Policy (SOP) violation. The following steps can help you troubleshoot this issue:
- Verify that Laravel CORS middleware is installed and configured correctly.
1. Verify that Laravel CORS middleware is installed and configured correctly:
Install the laravel-cors package with Composer by running this command in your project directory: composer require barryvdh/laravel-cors.
Add the Laravel CORS middleware to your application's pipeline in app/Http/Kernel.php. For example:
use Barryvdh\Cors;
// ...
protected $middlewareGroups = [
// ...
'api' => [
\App\Http\Middleware\CheckForMaintenanceMode::class,
\Barryvdh\Cors\HandleCors::class,
\Illuminate\Foundation\Http\ValidatePostSize::class,
]
];
2. Configure the desired CORS options:
In Laravel 5.6, you can specify your preferred CORS configuration in the app/config/cors.php file. Some common configurations include allowing specific origins, methods, and headers as follows:
return [
'paths' => ['api/*', 'auth/*'],
'allowed_origins' => ['http://127.0.0.1:8000', 'https://example.com', '*'],
'supported_methods' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
'exposed_headers' => [],
];
3. Check your HTTP response headers:
Ensure that the Laravel application sets the correct CORS headers when responding to API requests. In Laravel, these are controlled through the response()->withHeaders() method which can be used as follows:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type, X-Requested-With');
4. Consider using VueJs Axios library:
If you're using the Axios library for your HTTP requests in the frontend app, the axios-cors package can be a handy addition to handle CORS issues gracefully. Install it with NPM using this command: npm install axios-cors --save.
5. Review the VueJs frontend code:
Make sure your VueJs app follows best practices when making HTTP requests. For instance, it's recommended to use the Axios library for all API calls and add necessary CORS configurations in the VueJs app's main.js file.