我在同一台本地机器上的端口 3000 和 Express 服务器的端口 4000 上运行我的反应应用程序。
在我的反应应用程序中,使用 fetch api 我将我的注册表数据发送到我在“/注册”路由的快速服务器 -
const response = await fetch('/register' , {
method: 'POST',
headers : {
"Content-Type" : "application/json"
},
body: JSON.stringify({
name: username,
email : useremail,
phone : userphone,
work : userwork,
password: userpassword,
cpassword : usercpassword
})
});
const data = await response.json();
if(data.status === 422 || !data){
window.alert("Invalid registration");
console.log("Invalid registration");
}else{
window.alert("registration successful");
console.log("registration successful");
//using useHistory hook
history.push('/login');
}
}
在我的快速服务器中,我在“/注册”路由上执行 post 方法并将表单数据存储在我的数据库中 -
router.post('/register' , (req,res)=>{
const {name, email, phone, work, password, cpassword} = req.body;
//we are checking if any of the inputs are empty or not
if(!name || !email || !phone || !work || !password || !cpassword){
return res.status(422).send('Please Fill All The Fields');
}
//we are observing if a user already registered or not by checking it's email
User.findOne({email : email})
.then((userExist) =>{
if(userExist){
return res.status(422).send('Email already exists');
}else if(password !== cpassword){
return res.status(422).send('Passwords are not matching');
}
//if the email dont exist , that means the user is new and we will store it's data in the DB
const user = new User({
name : name,
email : email,
phone : phone,
work : work,
password : password,
cpassword : cpassword,
});
//saved the stored data in the DB
user.save()
.then(()=>{
res.status(201).send('User registered Successfully')
})
.catch((err)=>{
res.status(500).send(err);
})
}).catch((err)=>{
console.log(err);
})
})
在我的反应应用程序的 package.json 文件中,我将代理添加到 localhost:4000(在端口 4000 定义的快速服务器)-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy" : "http://localhost:4000",
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^5.0.0-beta3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
在我的 Firefox 控制台中,我遇到了这个错误 -
在网络选项卡下的浏览器中,我得到了这个 -
I am facing a 422 status error.I have been trying to solve this issue for the past 5 hours but after reading many solutions & articles i am not able to solve this issue of mine.I also checked similar questions on stackoverflow but the solution to them didnt worked.Basically , i am trying to send my registration form data from my react app to my express server by defining a proxy in the package.json file(of react app) , but i dont know why react is still considering it's own port 3000 instead of the server port 4000.Please help me solve this problem.Thanks a lot.
You can see the proxy is not working by the url localhost:3000/register. The proxy setting only works in development mode and that is not certain as well. You have two options:
要么在你的 fetch 请求中写下整个 url,要么在每次 API 调用之前制作一个 fetch 拦截器来添加 'localhost:4000' 。
PS 还有第三种选择:如果您不想编写自定义 fetch 拦截器,则可以使用 axios 代替 fetch。Axios 实例非常容易实现:https : //medium.datadriveninvestor.com/axios-instance-interceptors-682868f0de2d
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句