ReactからノードにPOSTリクエストを送信しようとすると、プロキシリクエストエラーが発生します。プロキシはgetリクエストで正常に機能しています

noahdubs

ユーザーにログインするためにPOSTリクエストを送信しようとすると、この正確なエラーが発生します。

[HPM]リクエスト/ api / loginをlocalhost:3000からhttp:// localhost:5000(ECONNRESET)にプロキシしようとしたときにエラーが発生しましたhttps://nodejs.org/api/errors.html#errors_common_system_errors

最初は、これはクライアントとサーバー間のプロキシの設定方法に関連する問題だと思いましたが、バックエンドからデータを完全に取得できます。したがって、データをバックエンドに投稿しようとしているときに問題が発生する必要があります(私は思いますか??)

これが私のReactLoginコンポーネントです:

import React from 'react'

class Login extends React.Component {
    state = {}

    handlChange = event => {
        const { name, value } = event.target
        this.setState({ [name]: value })
    }

    handleSubmit = () => {
        fetch("/api/login", {
            method: "POST",
            headers: {
                'content-type': 'application/json' 
            },
            body: JSON.stringify(this.state)
        })
    }

    render() {
        console.log(this.state)
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" name="username" value={this.state.username} onChange={this.handlChange} placeholder="Username" />
                    <input type="password" name="password" value={this.state.password} onChange={this.handlChange} placeholder="Password" />
                    <button>Login</button>
                </form>
            </div>
        )
    }
}


export default Login 

Reactのドキュメントで提案されているように、srcフォルダー内のsetUpProxy.jsファイルを使用してプロキシを設定しています。次のようになります。

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

module.exports = function(app) {
    app.use(
        '/api',
        proxy({
            target: 'http://localhost:5000',
            changeOrigin: true 
        })
    );
};

クライアント側のアプリは、何か違いがあればcreate-react-appで構築されました

noahdubs

結局のところ、YouTubeや他のサイトのハウツービデオの多くは不正確です。次に問題は、create-react-appを使用して、Node / ExpressをサポートするReactアプリをビルドしたことです。Reactのドキュメントを確認したところ、次のことがわかりました。Reactアプリを正しい方法でセットアップする方法基本的に、create-react-appの代わりにNext.jsを使用する必要がありました。Create-react-appは、単一ページのサイトのみを対象としています。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ