LaravelでWP REST APIを取得できない

Question

バージョン情報

• Laravel 5.8
• vue.js 2.6

状況

LaravelとVue.jsでwebアプリを開発しています。
その中でWordPressの記事を取得する必要がありaxiosでWP REST APIにアクセスしたのですが下記のエラーが出ています。
Access to XMLHttpRequest at 'https://取得元のドメイン/wp-json/wp/v2/posts/' from origin 'http://開発中のドメイン' has been blocked by CORS policy: Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

CORSのエラーでそこの設定をすれば直るかと思ったのですがイマイチCORSの理解も薄く
エラーの解消が出来ません。
わかる方何卒ご教授いただければ幸いです。

試したこと

php artisan make:middleware Cors

app/Http/kernel.php

protected $middleware = [
        \App\Http\Middleware\Cors::class　//これを追加
];
protected $routeMiddleware = [
        'cors'  => \App\Http\Middleware\Cors::class,//これを追加
];

app/Http/Middleware/Cors.php

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-Methods', '*')
            ->header('Access-Control-Allow-Headers', 'Content-Type,Authorization, X-Requested-With,X-CSRF-Token,X-XSRF-TOKEN');
    }
}

routes/api.php

Route::middleware(['cors'])->group(function () {
    Route::get('/', function () {
        return response()->json();
    });
});

Answer 1

エラー内容をよく読めば理解できました。
「x-xsrf-tokenがheaderに無いよ」というエラーなので
回答頂いたコードに下記の記述を追加したら動作しました。

header( 'Access-Control-Allow-Headers: Content-Type, x-xsrf-token,x-requested-with' );

以下が現状動作しているコード全体になります。

//REST API HTTPレスポンスヘッダ制御上書き
add_action( 'rest_api_init', function() {
  remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
  add_filter( 'rest_pre_serve_request', function( $value ) {
      header( 'Access-Control-Allow-Origin: *' );
      header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
      header( 'Access-Control-Allow-Credentials: false' );
      header( 'Access-Control-Allow-Headers: Content-Type, x-xsrf-token,x-requested-with' );
      return $value;
  });
}, 15 );

Answer 2

https://gato.intaa.net/archives/15217

Comments

[yamaotakuro]

回答ありがとうございます。
エラー内容は変わりましたが依然エラーのままです。
以下変更されたエラー内容
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

お手数ですが再度確認いただければ幸いです。