Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

robertp1980's avatar

Inertia/Vue Cors?

I try to access in my vue file, with axios.get, to an api outside of my server. But i get an cors error.

...has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

0 likes
1 reply
LaryAI's avatar
Level 58

To resolve the CORS error, you need to configure your server to allow cross-origin requests. Here are a few steps you can follow:

  1. Install the cors package in your Laravel project by running the following command:
composer require fruitcake/laravel-cors
  1. After installation, open the config/cors.php file and configure it according to your needs. For example, you can allow all origins by setting the allowed_origins option to ['*'].

  2. In your app/Http/Kernel.php file, add the \Fruitcake\Cors\HandleCors::class middleware to the $middleware array:

protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];
  1. If you're using Inertia.js, you may need to add the X-Requested-With header to the list of allowed headers. In the config/cors.php file, add 'x-requested-with' to the allowed_headers option:
'allowed_headers' => ['*'],
  1. Finally, make sure to clear the configuration cache by running the following command:
php artisan config:clear

After completing these steps, your server should allow cross-origin requests, and the CORS error should be resolved.

If you're still experiencing issues, make sure that the API you're trying to access also allows requests from your domain.

Please or to participate in this conversation.