LaravelとReactで 'Access-Control-Allow-Origin'エラーが発生しません

Question

私の反応アプリlocalhost:8080からルーメンapi localhost:8000にリクエストを送信してjsonデータを取得しています。

これは、内腔の私routes.phpです：$app->get('list', 'ArticleController@listAll');

そして、これは、内腔の私ArticleController.php次のとおりです。

<?php 

namespace App\Http\Controllers; 

use Response; 
use Illuminate\Support\Facades\Input; 
use App\Article as Article; 

class ArticleController extends Controller 
{ 
    public function listAll(){ 
     $articles = Article::all(); 

     return response() 
      ->json($articles) 
      ->setCallback(Input::get('callback')); 

    } 
} 

クロスドメインのフェッチのために私はエラーを取得しているので、私はJSONPを使用しようとしているが、ためていますそれはまだ動作していないいくつかの理由。

これが反応中に私のコードです：

componentWillMount(){ 

    fetch('http://localhost:8000/list?callback=asdf', { 
     method: 'GET' 
    }).then(function(res) { 
     console.log(res); 
    }).catch(function(err) { 
     console.log(err); 
    }) 
} 

任意の助けをいただければ幸いです。私はこの種のものにはとても新しいです。 おかげ

Answer 1

問題は、あなたのAPIサーバは、他のドメインからそれを使用できるように、正しいCORSヘッダを返すべきであるということです。あなたはこれを解決するには、2つのオプションがあり

：

1. があなたのAPI応答の正しいCORSを追加しますが、この1 https://github.com/barryvdh/laravel-corsのようなソリューションを使用する準備ができているか、あなたもその独自のhttps://gist.github.com/danharper/06d2386f0b826b669552
2. プロキシを使用することができますCORSヘッダを追加しますJSONPについて
3. 使用JSONP

（Webサーバの設定を使用して応答にCORSヘッダを追加することが可能です） - それはかなり有効なオプションであり、それは動作します...

fetch - それはあなたがそれを使用できる方法ではないので、あなたのケースでは、それは動作していません。

JSONPはリクエストURLでスクリプトタグを作成し、スクリプトがロードされたときにurlで指定されたグローバルコールバックが呼び出されるのを待ちます（What is JSONP all about?）。あなたは、あなた自身でそれを実装する必要がある、またはより良い - 使用ライブラリは、それを実装する（例えば、jQueryのために）あなたの助けのための