質問編集履歴

質問時と状況が変わったので追記させていただきます。

2020/01/16 10:53

投稿

marutto

スコア32

test CHANGED Viewed

	@@ -1 +1 @@
1	- [laravel]axiosで外部WebAPI~~に通信~~する~~とCORSエラーが出る~~
1	+ [laravel][guzzle]axiosでlaravel側のWebAPIの情報を取得するアクションを実行させたい

test CHANGED Viewed

@@ -2,7 +2,45 @@
-相談したいのは、axiosを使って楽天書籍検索のWebAPIへGET通信した際のCORSエラーに対する対処法です。
+相談したいのは、axiosでlaravel側の楽天ブックAPIの情報を取得するアクションを実行させる処理です。
+[【Laravel & Guzzle】APIの呼び出し方法をわかりやすく解説](https://yaba-blog.com/laravel-call-api/)
+こちらの記事内にあります、「【GET編】コントローラに処理を記載して、viewで表示する」を参考に実装しています。
+・エラー内容
+```ここに言語を入力
+app.js:665 Uncaught (in promise) Error: Request failed with status code 500
+    at createError (app.js:665)
+    at settle (app.js:911)
+    at XMLHttpRequest.handleLoad (app.js:178)
+```
+500エラーについてログを確認したところ、以下の記述がありました。
+```ここに言語を入力
+[2020-01-16 19:39:49] production.ERROR: Object of class GuzzleHttp\Psr7\Response could not be converted to string {"userId":1,"exception":"[object] (ErrorException(code: 0): Object of class GuzzleHttp\Psr7\Response could not be converted to string at /home/engineer5271/op-book.tk/laravel/src/app/Http/Controllers/API/BookController.php:58)
+[stacktrace]
+#0 /home/ホスト/アプリドメイン/laravel/src/app/Http/Controllers/API/BookController.php(58): Illuminate\Foundation\Bootstrap\HandleExceptions->handleError(4096, 'Object of class...', '/home/ホスト...', 58, Array)
+#1 [internal function]: App\Http\Controllers\API\BookController->show('\xE4\xBF\xAE\xE7\xBE\x85\xE3\x81\xAE\xE9\x96\x80')
+```
@@ -10,57 +48,23 @@
 ・やったこと
-inputから入力された値をURLパラメータに乗せてGET通信、受け取った情報をveux(store)で同期、コンポーネントに出力。
-下記、laravelのプロジェクトを作成する前にオンラインエディター(codesandbox)のプロジェクトURLを登録したところ、本の情報を引っ張ってこれてました。
-・コンソールで確認したエラー
-```ここに言語を入力
-Access to XMLHttpRequest at 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&formatVersion=2&elements=title,author,itemPrice,itemCaption,isbn,salesDate,largeImageUrl,booksGenreId,affiliateUrl&sort=standard&title=%E4%BF%AE%E7%BE%85%E3%81%AE%E%80&hits=5&applicationId=xxxxxxxxxx&affiliateId=xxxxxxxxxxx' from origin 'https://アプリドメイン' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
-```
-```ここに言語を入力
-app.js:665 Uncaught (in promise) Error: Network Error
-    at createError (app.js:665)
-    at XMLHttpRequest.handleError (app.js:200)
-```
-続いて、vuex(store)のコードです。
-(フロントサイドにApplicationIdを載せることのリスクは承知しているのですが、一旦脇に置いてご覧になってくださると幸いです。)
-なお、パラメータ中に展開されているenv.APIKeyとaffiliate_Idはenv.jsという別ファイルから読み込んでいます。
-・store/index.js
+vueで作ったinputにテキストが入力されると、キーワードをURLパラメータに乗せてapiアクションのルートにGET。
+コントローラーアクションとしては「show」になります。
+・store/index.js内の該当メソッド
 ```ここに言語を入力
         async doSearch({ commit }, queryWord) {
-            const limit = 5;
-            const url = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&formatVersion=2&elements=title,author,itemPrice,itemCaption,isbn,salesDate,largeImageUrl,booksGenreId,affiliateUrl&sort=standard&title=${queryWord}&hits=${limit}&applicationId=${env.APIkey}&affiliateId=${env.affiliateId}`;
-            // TODO:下のconsole.logで本番削除
-            console.log(url);
+            // キーワードをリクエストパラメータで送る
+            const url = `/book/${queryWord}`;
             // TODO:例外処理
@@ -98,29 +102,169 @@
         }
-```
-[楽天ブックスAPIについて](https://webservice.rakuten.co.jp/document/#bookApi)
-![イメージ説明](f0089f573bfaf32c40a059db0fccb0ca.png)
-フロント・バック(ruby)の違いはありますが、下記の楽天ブックスの使い方に書かれた記事をみる限り、
-CORSについての処理はしていないのですが・・・。
-・[楽天ブックス書籍検索APIでISBNコードから書籍情報を表示する](https://usortblog.com/rakuten-books-api-shortcode/)
-また、繰り返しになりますが、オンラインエディター上では情報を取ってこれていたので、
-どうすればいいのか悩んでおります。
+    }
+});
+```
+・route/web.php内にapireourceルートを設置
+```ここに言語を入力
+Route::apiResource('/book', 'API\BookController');
+```
+・app\HttpディレクトリにAPI/BookControllerを作成
+```ここに言語を入力
+// 以下のターミナルコマンドを実行
+php artisan make:controller API/BookController --api
+```
+・config/services.phpに環境変数(楽天ブックスのapplicationId)の記述を追加
+```ここに言語を入力
+return [
+    'sparkpost' => [
+        'secret' => env('SPARKPOST_SECRET'),
+    ],
+// 末尾に追加
+    'rakuten' => [
+        'api_key' => env("API_KEY"),
+        'secret_key' => env("SECRET_KEY"),
+        'affiliate_id' => env("AFFILIATE_ID")
+    ]
+}
+```
+・コントローラー内に以下を記述
+キーワード検索をしたいので、showアクションに記述
+```ここに言語を入力
+<?php
+namespace App\Http\Controllers\API;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+use GuzzleHttp\Client;
+class BookController extends Controller
+{
+    /**
+     * Display the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function show($id)
+    {
+        // GETで送られてきたキーワード
+        $key_word = $id;
+        // 取得件数
+        $limit = 10;
+        // アプリケーションID(config/services.php/rakuten/api.keyを読み込む)
+        $api_key = config('services.rakuten.api_key');
+        // 通信方法
+        $method = "GET";
+        // URL
+        $url = "https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&formatVersion=2&elements=title,author,itemPrice,itemCaption,isbn,salesDate,largeImageUrl,booksGenreId,affiliateUrl&sort=standard&title={$key_word}&hits={$limit}&applicationId={$api_key}";
+        // リクエストインスタンス生成
+        $client = new Client();
+        // GETで楽天ブックスへ通信
+        $response = $client->request($method, $url);
+        return response()->json($response);
+    }
+```
+・php artisan route:list」で、ルートを確認
+![イメージ説明](1621444a5b9f6b6144ddeaf201b2c2bc.png)
+ここまでしたのですが、最初に挙げたエラーが解決できず詰まっています。