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

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

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

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

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

1755閲覧

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

yamaotakuro

総合スコア13

Vue.js

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

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2020/06/10 06:28

バージョン情報

  • 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

php

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

app/Http/Middleware/Cors.php

php

1class Cors 2{ 3 /** 4 * Handle an incoming request. 5 * 6 * @param \Illuminate\Http\Request $request 7 * @param \Closure $next 8 * @return mixed 9 */ 10 public function handle($request, Closure $next) 11 { 12 return $next($request) 13 ->header('Access-Control-Allow-Origin', '*') 14 ->header('Access-Control-Allow-Methods', '*') 15 ->header('Access-Control-Allow-Headers', 'Content-Type,Authorization, X-Requested-With,X-CSRF-Token,X-XSRF-TOKEN'); 16 } 17}

routes/api.php

php

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

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

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

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

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

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

guest

回答2

0

自己解決

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

php

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

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

php

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

投稿2020/06/12 01:16

yamaotakuro

総合スコア13

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

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

0

投稿2020/06/10 06:31

kyoya0819

総合スコア10429

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

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

yamaotakuro

2020/06/10 06:55

回答ありがとうございます。 エラー内容は変わりましたが依然エラーのままです。 以下変更されたエラー内容 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. お手数ですが再度確認いただければ幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問