質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

3334閲覧

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

tktail

総合スコア72

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2020/10/21 05:14

実現したいこと

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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は今後似たようなエラーに遭遇したときに、また参考にしてみます。ありがとうございました。
guest

回答1

0

ベストアンサー

CORSの設定するのはWordPress側。
と言っても普通はすでに設定済でなにもしなくてもいいはずなので
WordPress側のどこかで間違えている。

Laravel側は何も関係ない。
Laravel使ってるならVueではなくLaravelで取得すればCORSとか関係ないし簡単。

投稿2020/10/21 06:36

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tktail

2020/10/22 10:35

kawaxさん いつも参考になります。 Laravel側でapiを受け取り、vueに渡してあげると上手く行きました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問