自作APIからデータが取得できない (CrossDomain)

お世話になっております。
現在以下のような環境でReactからAPIをリクエストしてJSONを取得したいと思っていますが、うまくいきません。
原因がわからないため、わかる方がいらっしゃいましたら、教えてください。

##エラーメッセージ

Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

##開発環境

同じDokcer-コンテナ上に api.localhostのLaravelを立ち上げて、アプリ側からリクエストを出す形になります。

##原因の切り分け
原因を切り分けるために以下の試しました。

ブラウザのアドレスバーに直接api.localhost・・・を書いてアクセス→JSONが表示される
Condeigniterコンテナに入り内側からcurlでapiを叩く→JSONが表示される
localhostから別のapiを叩く（qiita）→JSONが表示される

という風にいずれもjsonが表示されているので、apiサーバー(Laravel)の問題かと思い、Laravelのレスポンスヘッダーの設定も行いましたが、うまくいきませんでした。

##Laravelの設定
ミドルウェアを作り許可

app/Http/Middleware/Cros.php

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With')
        ->header('Access-Control-Allow-Credentials: true');
}

app/Http/Kernel.php　＞　$routedMiddleware

'cors' => \App\Http\Middleware\Cors::class,

routes/web.php

Route::group(['middleware' => ['cors'], 'prefix' => 'api'], function ($router) { 
    // routes here ... 
});

##Reactからのリクエスト

request

       .get('http://api.location/api/movie')
       .query({limit: 5})
       .set('Content-Type', 'application/json')
       .set('Accept', 'application/json')
       .end((error, res) => {
       if (!error && res.status === 200) {
         console.log(JSON.parse(res.text))
       } else {
         console.log(error)
       }
     })

##他にやった事
ChromeにCORSという拡張機能を入れてレスポンスヘッダーにAllow:*が付くように設定

##バージョン
・Laravel:5.5
・React: 8.9.3

どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Condeigniterコンテナに入り内側からcurlでapiを叩く→JSONが表示される

Condeigniterのプログラムがバグってるっぽいですね。ソースのrequestオブジェクトのrequire元がわからないので何とも言えませんがnode-rest-client moduleで簡単にできそうです。

https://www.npmjs.com/package/node-rest-client

example

var Client = require('node-rest-client').Client;
 
var client = new Client();
 
// direct way
client.get("http://remote.site/rest/xml/method", function (data, response) {
    // parsed response body as js object
    console.log(data);
    // raw response
    console.log(response);
});
 
// registering remote methods ★★★★jsonならこっちっぽいですかね↓↓↓↓
client.registerMethod("jsonMethod", "http://remote.site/rest/json/method", "GET");
 
client.methods.jsonMethod(function (data, response) {
    // parsed response body as js object
    console.log(data);
    // raw response
    console.log(response);
});

投稿2018/05/01 18:41

mosapride

総合スコア1480

alberorana

2018/05/02 06:32

ご回答ありがとうございます！無事に取得できました！ただ、なぜ以前のコードがだめだったのか、わからないので、教えていただけないでしょうか？質問に記載したrequestの元（おそらく何もimportしていなかった）のが原因でしょうか？ご回答いただいたnode-rest-client moduleはnpmからインストールしました。お手数ですが、教えていただけますと幸いです。