11

ポート 3000 セットアップで実行されているかなり小さな create-react-app を使用して、ポート 8080 で実行されているバックエンド サーバーにリクエストをプロキシします。ブラウザのアドレス バーhttp://localhost:3000/api/meに入力すると、index.html ページが返されますが、フェッチ API を使用すると/api/meバックエンドで呼び出してみてください。

問題は、Cookie を設定するバックエンドで認証する必要があることですが、ログイン ページにアクセスhttp://localhost:3000/loginできないため、Cookie を取得できません。

create-react-app から取り出した別のプロジェクトでは、構成で webpack-dev-server を実行するための小さなファイルがあります

  proxy: {
    "*": "http://localhost:9191"
  }

これは、ブラウザのアドレス バーに入力された場合でもプロキシ リクエストを行います。

create-react-app でそのようなセットアップを作成することは可能ですか?

4

3 に答える 3

18

create-react-app コードを詳しく調べると、これが設計によるものであることがわかります。

シングル ページ アプリの場合、通常は /index.html にフォールバックします。proxyただし、API 呼び出しも尊重したいと考えています。したがって、proxyが指定されている場合は、使用するフォールバックを決定する必要があります。ヒューリスティックを使用します。リクエストacceptが text/html の場合、/index.html を選択します。最新のブラウザーではaccept、移動時に text/html がヘッダーに含まれます。ただし、API 呼び出しfetch()は通常、text/html を受け入れません。このヒューリスティックがうまく機能しない場合は、使用しないでくださいproxy。

内部 REST コンソール拡張の GET を実行するとhttp://localhost:3000/api/me、正しい結果が返されます。

Fetch API と Cookieについてさらに読むと、Cookieを送信するには、パラメーター credentials:true を含める必要があることがわかります。

fetch('/api/me', {
  credentials: 'include'
})
于 2016-11-30T19:59:01.093 に答える