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

Question

full error message :

Access to XMLHttpRequest at 'https://api_url' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

I cannot fixed this cors problem .

my vue component code :

test(){
  axios.get("https://api_url")
  .then(response => {
        this.data = response.data.data;
  });
}

I also create a middleware & add it to protected array $middleware in Kernel.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST, PUT')
            ->header('Access-Control-Max-Age', '3600')
            ->header('Access-Control-Allow-Headers', 'Origin, Accept, Content-Type, X-Requested-With');
    }
}

score 0 · Answer 1 · answered Nov 05 '19 at 22:59

0

Use this package and it will solve your problem https://github.com/barryvdh/laravel-cors

answered Nov 05 '19 at 22:59

Mohammed Aktaa

1,345
9
14

where i can't see it's implementation – Mohammed Aktaa Nov 05 '19 at 23:01
i used it , but not working . i remove it from protected array `$middleware` in `Kernel.php` – Nov 05 '19 at 23:04
can you show me how you used it. if you are using api you just need to app it to api middlewares – Mohammed Aktaa Nov 05 '19 at 23:05
yes , i add these line . `'api' => [ \Barryvdh\Cors\HandlePreflight::class, 'throttle:60,1', 'bindings', ],` – Nov 05 '19 at 23:11
please correct it to `\Barryvdh\Cors\HandleCors::class` and put it in the last of api array middlewares – Mohammed Aktaa Nov 05 '19 at 23:12
it's not `HandlePreflight` – Mohammed Aktaa Nov 05 '19 at 23:13
do you have any way to share your screen ? any desk, teamviewer? – Mohammed Aktaa Nov 05 '19 at 23:16
yes. I have Teamviewer . ID : 1 654 017 422 , Password : 5i51ay – Nov 05 '19 at 23:19

score 0 · Answer 2 · answered Nov 06 '19 at 05:54

Use this package like @Mohammed Aktaa suggested: https://github.com/barryvdh/laravel-cors

Add the HandleCors middleware to your api $middlewareGroup array in app/Http/Kernel.php:

'api' => [
    // ...
    \Barryvdh\Cors\HandleCors::class,
],

Publish the configuration of the package:

$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

Edit the configuration to use the CORS_ORIGIN environment variable for the allowed origin:

'allowedOrigins' => [env('CORS_ORIGIN', '')],

In your .env file, add an entry for your local origin:

CORS_ORIGIN="http://localhost:3000"

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

2 Answers2