[英]Network Error when trying to register with ReactJS
I have a register form with only one field (username).我有一个只有一个字段(用户名)的注册表单。 When I try to register a new member I got that error
Error: Network Error
当我尝试注册新成员时,我收到了错误
Error: Network Error
Here is my Register Class这是我的寄存器 Class
constructor(props) {...}
handleChange(event) {...}
handleSubmit(event) {
const username = this.state.username;
console.log(username);
axios.post("http://localhost:1270/", { username }, { withCredentials: true }
).then(reponse => {
console.log('register', reponse)
});
event.preventDefault();
}
render() {...}
And the my server.js
还有我的
server.js
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
app.post('/', (request, reponse) => {
mongo.connect(url, function (err, db) {
var dbo = db.db("mern-pool");
var username = request.body.username;
console.log(username);
var obj = {
username:username
};
dbo.collection("students").insertOne(obj, function(err, result) {
db.close();
reponse.send('inserted');
});
});
});
If I delete this part of my code, my username is inserted correctly如果我删除这部分代码,我的用户名将正确插入
{ withCredentials: true }
When axios
requests don't return 200 it throw an error.当
axios
请求不返回 200 时,它会引发错误。 You have to haddle it.你必须处理它。 Replace the axios call to this:
将 axios 调用替换为:
axios.post("http://localhost:1270/", { username }, { withCredentials: true })
.then(reponse => {
console.log('register', reponse);
})
.catch(err => {
console.log('Axios Err', err);
})
Then tell us.然后告诉我们。
This may caused by CORS... I already tried to set manualy the headers for CORS but still having issues, then I just npm install cors
then:这可能是由 CORS 引起的...我已经尝试手动设置 CORS 的标题但仍然有问题,然后我只是
npm install cors
var cors = require('cors')
app.use(cors())
Based on your comment on Jackson's answer, it looks like you have Access-Control-Allow-Credentials
enabled as well as Access-Control-Allow-Origin
set to *
.根据您对杰克逊回答的评论,您似乎已启用
Access-Control-Allow-Credentials
以及Access-Control-Allow-Origin
设置为*
。 CORS doesn't allow for * and credentials to be true, you have to specify http://localhost:1270/
as an allowed origin in your api, that will allow you to have Access-Control-Allow-Credentials: true
. CORS 不允许 * 和凭据为真,您必须指定
http://localhost:1270/
作为 Z8A5DA52ED126447D359E70C05721A8Allow Access-Control-Allow-Credentials: true
C05721A8Allow-凭据中的允许来源
CORS can be a pain if you don't know its quirks, it basically stops requests being made to the api from a location it doesn't recognize. CORS 如果你不知道它的怪癖可能会很痛苦,它基本上会阻止从它无法识别的位置向 api 发出请求。 So when you specify
*
that says it will allow every origin, every source, to be able to access the api.因此,当您指定
*
表示它将允许每个来源、每个来源都能够访问 api。 However, one quirk of CORS is that if your Allow-Origin is *, it will not allow Access-Control-Allow-Credentials: true
.但是,CORS 的一个怪癖是,如果您的 Allow-Origin 是 *,它将不允许
Access-Control-Allow-Credentials: true
。 So if you need that to be true, you need to specify your client app origin ( http://localhost:1270/
I think) as an acceptable location to receive requests from.因此,如果您需要这样做,您需要指定您的客户端应用程序来源(我认为
http://localhost:1270/
)作为接收请求的可接受位置。
Hope that makes sense and helps希望这有意义并有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.