为什么在一种情况下我在ExpressJS中出现cors错误，而在另一种情况下却没有？

Question

I'm setting up a database and connecting it to some routes. I've managed to get it to work for one route but not the other. The 'register' route works but the 'login' route doesn't. When I try to run the login route, I get a 'cors error.'

I've tried to use console.logs to see where the problem lies. I also tried adding cors as well to my node server.

    const app = express();
    app.use(cors());

Here's the backend code for the '/register' route that actually works.

app.post('/register', (req, res) => {
 const { email, password } = req.body;

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("expense_tracker");
  var myobj = {
    email: email,
    password: password,
    budget: "100",
    spent: "0",
    expenses: [],
    food: "0",
    clothing: "0",
    personal: "0",
    entertainment: "0",
    other: "0"

  };
  dbo.collection("users").insertOne(myobj, function(err, response) {
    if (err) throw err;
    console.log("1 document inserted");
    console.log(response.ops);

    if(email !== '' || password !== ''){
        res.json(response.ops);
    }else{
        res.status(400).json("One of the fields is blank; couldn't return user");
    }
    db.close();
  });
});
})

And here is where it is connected to my react app:

onSubmitRegister = () => {
 console.log(this.state.signinPassword);
    fetch('https://server-budget-blaze349.c9users.io/register', {
        method: 'post',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            email: this.state.signinEmail,
            password: this.state.signinPassword
        })
    }).then(response => response.json())
    .then(user => {
      console.log('user', user);
        if(user){
              this.props.onRouteChange('budget');
              this.props.loadUser(user[0]);
        }
    })
   }  

I receive a working JSON object when I request.

However when do something similar for the login:

app.post('/signin', (req, res) => {
 const { email, password } = req.body;

console.log("FRONT END : " + password + ", " + email);

console.log("BACK END: ", database[0].password);

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("expense_tracker");
  var query = { email: email, password: password };
  dbo.collection("users").find(query).toArray(function(err, result) {
    if (err) throw err;
    console.log(result);
    res.json(result.ops[0]);
    db.close();
  });
});



})

And the front end:

   onSubmitSignIn = () => {
       console.log(this.state.signinPassword);
    fetch('https://server-budget-blaze349.c9users.io/signin', {
        method: 'post',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            email: this.state.signinEmail,
            password: this.state.signinPassword
        })
    }).then(response => response.json())
    .then(user => {
      console.log('user', user);
        if(user){
          this.props.loadUser(user);
              this.props.onRouteChange('budget');
        }
    })
  }  

I get this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I've been trying to figure out why its happening but I'm still not quite sure. Any help would be much appreciated on how to fix this 'cors' error.

Thanks

Answer 1

Replace app.use(cors()) with

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});