6

create-react-appそこで、を使用してアプリケーションにプロキシを設定しましたhttp-proxy-middleware。手紙の指示に従ったことは確かですが、関連するリンクをクリックしようとするたびに 404 が返されます。

create-react-appv3.2を使用しています。

これが私のsetupProxy.jsファイルです：

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy("/api", { target: "http://localhost:3090" }));
};

httpリクエストを行うアクション作成者は次のとおりです

export const signIn = formProps => async dispatch => {
    try {
        const response = await axios.post("/api/login", formProps);

        //.....etc, etc
    } catch(e) {

        //.....etc,etc
    }
}

そして、ここに私の高速サーバー上の関連ルートがあります:

app.post("/login", requireSignIn, Authentication.login);

開発サーバーが起動すると、次のメッセージが表示されます。

[HPM] Proxy created: /api  -> http://localhost:3090

明らかにCRAsetupProxy.jsによって取り上げられていますが、どこかに問題があります。プロキシ設定にワイルドカードを追加しようとしましたが (例: "/api/*")、うまくいきません。クライアント側のコンソールに次の 404 が記録されます。

POST http://localhost:3000/api/login 404 (Not Found)

これは を参照しlocalhost:3000ており、プロキシ ( にリダイレクトする必要があります) が使用されていないことを示唆していlocalhost:3090ます。

ここに欠けている本当に単純なものがあると思わずにはいられませんが、現在、これを機能させようとして髪を引き裂いています。

どんな助けでも大歓迎です。

ありがとう！

4

3 に答える 3

31

の時点でv1.0.0、http-proxy-middlewareファイルsetupProxy.jsには明示的なインポートが必要です。以前のデフォルトのインポートの代わりに

const proxy = require("http-proxy-middleware");

以下を使用する必要があります。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(createProxyMiddleware("/api", { target: "http://localhost:3090" }));
};
于 2020-02-22T16:43:17.263 に答える