クライアントからのプロキシリクエストは、create-react-appおよびwebpack devサーバを使用してサーバに応答します。

Question

クライアントアプリケーション用のサーバサイドAPIを作成しようとしています。クライアントは完全に反応して書かれています。開発では、私は次のようにクライアントアプリケーションのpackage.jsonファイルにプロキシを追加したサーバーがポート3001 でリッスンしているポート3000上webdevserverで提供しています：

{ 
    "name": "client", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-scripts": "0.8.5" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.2", 
    "superagent": "^3.4.1" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    }, 
    "proxy": "http://localhost:3001/" 
} 

が、私は、サーバーのAPIを要求していたら、失敗します。

import Request from 'superagent'; 

export function searchTasks(text, callback) { 
    Request.get('http://localhost:3000/api/v1/tasks', response => { 
    callback(response.body.Search); 
    }) 
} 

応答オブジェクトがnullです。 3001ポートのAPIをリクエストしようとすると、すべて正常に動作します。 web-dev-serverがリクエストをプロキシしていないようです。あるいは、追加の設定オプションがありませんでしたか？

Answer 1

これはあなたのリクエストを行うためにsuperagentを使用しているためです。 superagentは、create-react-appプロキシが正しく動作するために、間違ったAcceptヘッダーを送信します。 create-react-app documentationのコメントによれば、プロキシのセットアップでは、ヒストリAPIに送信する内容とプロキシする内容を処理するヒューリスティックが使用されます。

ご要望に.accept('json')を追加すると、これを最も簡単に修正できます。これは次のように行われます：

もう1つの方法は、fetch APIを使用することです。ドキュメントの詳細については、古いブラウザの場合はそれをpolyfillする方法を参照してください。