web-dev-qa-db-ja.com

create-react-appはプロキシでは機能しません

Create-react-appを使用してbootstrap反応アプリ、package.jsonでこれを実行しました

"proxy":"http://localhost:3001"私のAPIサーバーは3001で実行されていますが、axiosを使用してリクエストを起動しますが、それでもポート3000を指しています。何が欠けているのか、何か手がかりはありますか？アプリを数回再起動しても同じです。

javascriptnode.jsreactjscreate-react-app
5
Jenny Mok

Package.jsonに以下を追加します。

"proxy": "http://localhost:3001",

サーバー（バックエンドアプリ）とフロントエンド（作成Reactアプリ）の両方を再起動してください

Axiosを使用したPOSTリクエストが次のようになっていることを確認してください。

axios.post("/auth/register", userData)
     .then(res => console.log(res.data));

上記のこの例は私の環境からのものであり、同様に機能します。プロキシは開発モードでのみ機能することに注意してください

プロキシとaxiosの両方の投稿のURLに正しいスラッシュが含まれているコードを確認してください

2
xargr

リクエストの絶対パスを削除し、代わりに相対パスを使用してください。

例

axios.post("/api/auth/register", userData)
 .then(res => console.log(res.data));

注：リクエストURIとしてhttp://localhost:3000/api/auth/registerを使用しないでください。リクエストURIは（Reactサーバー）によって自動的にプロキシされ、APIリクエストが処理されます。 01ポートから。

1
Malay M

この投稿が古いことは知っていますが、最近同じ問題が発生しました。

私にとってそれを修正したのは、ネイティブJavaScriptフェッチAPIの代わりにnpmパッケージaxiosを使用してAPIリクエストを行うことでした。

Axiosがフェッチとは異なる動作をしているリクエストヘッダーを確認するのに十分な深さはありませんでしたが、今ではすべてが正常に機能しています。

0
podenborg

問題はwebpack構成ファイルにあり、独自のスターターパックを使用して次のコードのように_webpack.dev.js_を設定するだけです

module.exports = merge(common, { mode: 'development', devServer: { Host: 'localhost', port: 3000, open: true, historyApiFallback: true, proxy: { '/api': { target: 'http://localhost:5000', secure: false } } }, devtool: 'inline-source-maps' });

サーバーに適切なローカルホストを設定し、dev-serverを再起動します。 「create-react-app」では、webpack構成ファイルはパス_/node_modules/react-scripts/config_にあり、上記のコードのように変更を加え、dev-serverを再起動すると問題ありません。このパスには、_webpack.dev.js_と_webpack.prod.js_があります。

0
Goran_Ilic_Ilke
  1. macで頻繁に動作する場合でも、これはWindowsのアクセス許可の問題にすぎません。
  2. 私はインストールするだけです-サーバー側でyarnglobal add http-server、今ではクライアント側から正常に動作しています
0
sanjeev

プロキシ設定を次のように置き換えます： "proxy"： " http://127.0.0.1:50 "、プロキシがpackage.jsonのクライアント側に追加されていることを確認し、ctrlを使用してハードリスタートを実行します+ cプロキシ設定をクライアント側に移動した後。

0
Yamini Suman