APIとの接続 - redux

Question

私はreactとreduxでプロジェクトをビルドしていますが、APIに接続できません。 私は、これを持って

componentDidMount() { 
    const {dispatch} = this.props; 
    dispatch(fetchByQuerystring()); 
} 

とfetchByQuerystringは次のとおりです。

export function fetchByQuerystring() { 
    return function(dispatch) { 

     return fetch(`http://my_domain.dev/api`) 
      .then(response => response.json()) 
      .then(json => dispatch(receiveByQuerystring(json))); 
    } 
} 

私はそれを実行して、私はこのエラーを取得する：

Fetch API cannot load http://my-domain.dev/api . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

がどのように私はこの問題を解決することができますか？ HTTP走る

Answer 1

Laravel github.com/barryvdh/laravel-corsのために役立つかもしれませんサイトAにいて、（Ajaxリクエストで）別のサーバーB（different port, different domain name/ip address or different protocol）を呼び出すと、ブラウザーはBが明示的にAを許可すると見なします。 これは、サーバーBによって追加されたHTTP応答ヘッダーで行われます（およびOPTIONSサポート）。 CORS (Cross-Origin Resource Sharing)を参照してください。

プロダクション環境の他のサーバーからAPIを呼び出す必要がある場合は、CORS support in laravelを追加することをお勧めします。必要がない場合は追加しないでください。

API呼び出しがsimple enoughとdon't require cookiesの場合、ローカルApacheをadd the headerAccess-Control-Allow-Origin: *に設定することができます。

それ以外の場合は、両方のリソース（APIと反応フロントエンド）を同じ起点から提供する必要があります。

Answer 2

あなたのローカルWebサーバ上のCORSヘッダーを設定する必要があります：/my-domain.dev/api

ヘッダが送信する：Access-Control-Allow-Origin: http://my-domain.dev/api

これは