尝试注册 ReactJS 时出现网络错误

Question

我有一个只有一个字段（用户名）的注册表单。 当我尝试注册新成员时，我收到了错误Error: Network Error

这是我的寄存器 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() {...}

还有我的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

根据您对杰克逊回答的评论，您似乎已启用Access-Control-Allow-Credentials以及Access-Control-Allow-Origin设置为* 。 CORS 不允许 * 和凭据为真，您必须指定http://localhost:1270/作为 Z8A5DA52ED126447D359E70C05721A8Allow Access-Control-Allow-Credentials: true C05721A8Allow-凭据中的允许来源

CORS 如果你不知道它的怪癖可能会很痛苦，它基本上会阻止从它无法识别的位置向 api 发出请求。 因此，当您指定*表示它将允许每个来源、每个来源都能够访问 api。 但是，CORS 的一个怪癖是，如果您的 Allow-Origin 是 *，它将不允许Access-Control-Allow-Credentials: true 。 因此，如果您需要这样做，您需要指定您的客户端应用程序来源（我认为http://localhost:1270/ ）作为接收请求的可接受位置。

希望这有意义并有所帮助