web-dev-qa-db-ja.com

反応とノードに対してプロキシが機能しない

設定したプロキシに問題があります。

これは私のルートpackage.jsonファイルです：

"scripts": {
    "client": "cd client && yarn dev-server",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
}

私のクライアントのpackage.jsonファイル：

"scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
},
"proxy": "http://localhost:5000/"

サーバー側でExpressをポート5000で実行するように設定しました。サーバーにリクエストを送信するたびに、つまり：

callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    // ... more stuff
}

リクエストは常に

Picture of header pointing to http://localhost:8080/api/hello

リクエストが実際にポート5000に送信されるように、この問題を修正するために何をしなければならないかを誰かが指摘できますか？

node.jsreactjswebpackproxypackage.json
7
Strahinja Ajvaz

クライアントは_http://localhost:8080_から読み込まれていますか？

デフォルトでは、fetch apiを絶対URLなしで使用すると、クライアントページのホスト（ホスト名とポート）がミラーリングされます。したがって、_http://localhost:8080_で実行されているページからfetch('/api/hello');を呼び出すと、fetch apiは、_http://localhost:8080/api/hello_の絶対URLに対してリクエストが行われることを推測します。

このようにポートを変更する場合は、絶対URLを指定する必要があります。あなたの場合はfetch('http://localhost:5000/api/hello');になりますが、最終的には本番環境でlocalhostを実行しないため、動的にビルドする必要があるでしょう。

3
casieber

サーバーサイド（ノード）のpackage.jsonではなく、クライアントサイド（反応）のpackage.jsonに配置してください。

1
Kittichote Kamalapirat