ユーザーにログインするために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で構築されました
結局のところ、YouTubeや他のサイトのハウツービデオの多くは不正確です。次に問題は、create-react-appを使用して、Node / ExpressをサポートするReactアプリをビルドしたことです。Reactのドキュメントを確認したところ、次のことがわかりました。Reactアプリを正しい方法でセットアップする方法基本的に、create-react-appの代わりにNext.jsを使用する必要がありました。Create-react-appは、単一ページのサイトのみを対象としています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加