Network Error when trying to register with ReactJS

Question

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

Here is my Register 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

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 } 

Answer 1

When axios requests don't return 200 it throw an error. You have to haddle it. Replace the axios call to this:

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:

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

Answer 2

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 * . 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 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. So when you specify * that says it will allow every origin, every source, to be able to access the api. However, one quirk of CORS is that if your Allow-Origin is *, it will not allow 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.

Hope that makes sense and helps