试图用ReactJS注册时出现网络错误

Question

我有一个只有一个字段(用户名)的注册表，当我尝试注册一个新会员时，我得到了这样的错误信息。Error: Network Error

这是我的注册班级

    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() {...}

而我的 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');
        });
    });
});

如果我删除这部分代码，我的用户名就会被正确插入。

 { withCredentials: true } 

Answer 1

当 axios 请求不返回200，它会抛出一个错误。你必须对它进行处理。把axios调用改为这个。

axios.post("http://localhost:1270/", { username }, { withCredentials: true })
  .then(reponse => {
    console.log('register', reponse);
  })
  .catch(err => {
    console.log('Axios Err', err);
  })

然后告诉我们。

这可能是由CORS引起的... 我已经试过手动设置CORS的头，但还是有问题，然后我就... npm install cors 那么

var cors = require('cors')
app.use(cors())

Answer 2

根据你对Jackson答案的评论，看来你有... Access-Control-Allow-Credentials 启用以及 Access-Control-Allow-Origin 设为 *. CORS不允许*和证书为真，你必须指定 http://localhost:1270/ 作为您的api中允许的起源，这将允许您在您的api中使用 Access-Control-Allow-Credentials : true.

如果你不知道它的怪癖，CORS可能会很麻烦，它基本上会阻止从它不识别的位置向api发出请求。所以当你指定 * 说它将允许每一个原点，每一个源，都能访问api。然而，CORS的一个怪癖是，如果你的Allow-Origin是*，它将不允许 Access-Control-Allow-Credentials : true. 因此，如果你需要这一点是真的，你需要指定你的客户端应用程序的起源(http://localhost:1270/ 我想）作为一个可接受的位置来接收请求。

希望这有意义，并帮助