実現したいこと
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}
回答1件
あなたの回答
tips
プレビュー