Access-Control-Allow-Origin ヘッダーを付与しても CORS エラーが解消しない

実現したいこと

wordpressで書いているブログをapiで取得。
laravelプロジェクトのvue.js/axiosでデータを受け取り、表示させたい。

###コード

vuejs
1import axios from 'axios';
2  
3export default({
4  data: () => ({
5    posts:[],
6    }),        
7    methods:{
8      getPosts(){
9        const url = 'https://wordpress.net/wp-json/wp/v2/posts?per_page=4';
10        axios.get(url)
11          .then(response => {
12            this.posts = response.data;
13          });
14      }
15    },    
16    mounted() {
17      this.getPosts();
18    }    
19 });
20

Vue.jsのコードはこちらを参考にして作成しました。
https://blog.capilano-fw.com/?p=5289

こちらのコードをConsolo.logに表示させると次のようなエラーが出てきております。

Access to XMLHttpRequest at 'https://wordpress.net/wp-json/wp/v2/posts?per_page=4' from origin 'https:vfs.cloud9.ap-northeast-1.amazonaws.com' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

どうやらCORSの問題で引っかかっている模様。

質問

以下のURLのように、Api通信の時はMiddlewareを通すように設定しましたが、やはり解決に至りません。
AWSのC9で制作しているからかなと、インバウンド設定のポートも空けてみたりとしましたが、やはり解決には至りませんでした。
このエラーについてご存じの方いらっしゃいましたら、よろしくお願い致します。

https://qiita.com/madayo/items/8a31fdd4def65fc08393

cors
1<?php
2
3namespace App\Http\Middleware;
4
5use Closure;
6
7class Cors
8{
9    /**
10     * Handle an incoming request.
11     *
12     * @param  \Illuminate\Http\Request  $request
13     * @param  \Closure  $next
14     * @return mixed
15     */
16    public function handle($request, Closure $next)
17    {
18        $paths = explode('/', \Request::getPathInfo());
19        if ($paths[1] === 'api') {
20            return $next($request)
21                ->header('Access-Control-Allow-Origin', '*')
22                ->header('Access-Control-Allow-Methods', 'GET, POST')
23                ->header('Access-Control-Allow-Headers', 'Accept, X-Requested-With, Origin, Content-Type');
24        }
25        return $next($request);
26    }
27}

退会済みユーザー

2020/10/21 05:33

まず、シンプルなリクエストになるのかプリフライトリクエストが必要かはわかっているのですか？　話はそれからだと思うのですが。

maisumakun

2020/10/21 05:57

「Api通信の時はMiddlewareを通すように設定しましたが」以下のコードは、どこへどのような形で設置したのでしょうか？

tktail

2020/10/21 06:23

SurferOnWwwさん CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response. と返ってきているので、プリフライトリクエストということなのでしょう。今回はwordpressから投稿データをLaravelプロジェクトに表示したいので、その行為自体がシンプルなリクエストなのかプリフライトリクエストが必要なのかどうか判断は出来ておりません。 maisumakunさん今回もお世話になります。 Http/Controllers/MiddlewareにCors.phpというファイルを作成し、前述のように記載しました。そして、同Controllers直下にあるKurnelsにて「protected $middlewareにパスを追加」、「protected $middlewareGroupsのapiにパスを追加」しました。

maisumakun

2020/10/21 06:29

アクセス先がhttps://wordpress.net/以下になっていますが、「そこにLaravel環境を構築している」という理解で間違いないでしょうか？

tktail

2020/10/21 06:36

環境の問題で伏せていますが wordpressはさくらのVPS、Laravel環境はAWSのCloud9で構築しています。

退会済みユーザー

2020/10/21 07:14

Fiddler などのキャプチャツールを使って要求・応答ヘッダの中身を調べるということはやっていますか？もしまだならやってみることをお勧めします。そこにヒントが見つかると思います。

tktail

2020/10/22 10:33

今回は別の方法で解決することが出来ました。 Fiddlerは今後似たようなエラーに遭遇したときに、また参考にしてみます。ありがとうございました。