1

This is a follow-up question from my previous question React.js: Axois Post stay on pending(but i am getting data)

My package.json file

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "express": "^4.16.3",
    "mongodb": "^3.1.6",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-html-parser": "^2.0.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "reactstrap": "^6.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

My server.js:

const express = require('express');
const app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());


//DB connections
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017";

// console.log that your server is up and running
app.listen(3001, () => console.log(`Listening on port 3001`));


// create a GET route
app.get('/test', (req, res) => {
  var data;
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("mydb");
    var query = { address: "Highway 37" };
    dbo.collection("customers").find(query).toArray(function(err, result) {
      if (err) throw err;
      data = result
      res.send(data[0])
      db.close();
    });
  });
});

//A Get route for getting personal Cart information
app.get('/myCart', (req, res) => {
  var total = 0;
  var data = []

  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("cart");
    dbo.collection("items").find().toArray(function(err, result) {
      if (err) throw err;

      var obj = []
      if(result.length >0){
        for(var i = 0; i < result.length; i++ ){
          var description = result[i].desc;
          var price = result[i].price
          if (!obj[description]) { // Add new object to result
            obj[description] = {
                desc: description,
                total: price,
                amount: 1
            };
          }else{
            obj[description].total += price
            obj[description].amount +=1
          }
        }

        for(var key in obj){
          console.log(obj[key])
          data.push(obj[key])
          total += obj[key].total
        }
      }

      res.send({express: data})
      db.close();
    });
  });



}); 


//a Post route for posting the added item to the data base
app.post('/add', (req, res) => {
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("cart");
    var objs = req.body;
    dbo.collection("items").insertMany(objs, function(err, result) {
      if (err) console.log(err);
      res.sendStatus(200)
      console.log("Number of documents inserted: " + result.insertedCount);
      db.close()
    });
  });
});


app.get('/wallet', (req, res) => {
  var data;
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("wallet");
    dbo.collection("account").findOne({}, function(err, result) {
      if (err) throw err;
      res.send( {express: result.amount})
      db.close();
    });
  });


});

app.get('/total', (req, res) => {
  var total = 0;

  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("cart");
    dbo.collection("items").find().toArray(function(err, result) {
      if (err) throw err;
      for(let item of result){
        total += item.price;
      }
      res.send({express: total})
      db.close();
    });
  });
});

app.post('/buy', (req, res) => {
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) console.log(err);
    var dbo = db.db("wallet");
    var myquery = { amount: {$gt: 0} }
    var newquery = { $set: {amount: req.body.amount}}
    dbo.collection("account").updateOne(myquery, newquery, function(err, re) {
      if (err) console.log(err);
      res.sendStatus(200)
      console.log("Wallet updated:", req.body.amount )
      db.close();
    });
  });


  MongoClient.connect(url, { useNewUrlParser: true}, function(err, db) {
    if (err) console.log(err);
    var dbo = db.db("cart");
    dbo.collection("items").deleteMany({}, function(err, res){
      if (err) console.log(err);
      res.sendStatus(200)
      console.log("numer of data deleted " + res.deletedCount)
      db.close();
    });
  });

});

app.post('/remove', (req,res) => {
  MongoClient.connect(url, { useNewUrlParser: true}, function(err,db){
    if (err) console.log(err);
    var dbo = db.db("cart");
    var myquery = { desc: req.body.name}
    console.log(req.body.name)
    dbo.collection("items").deleteMany(myquery, function(err,res){
      if(err) console.log(err);
      res.sendStatus(200)
      console.log("Numer of record deleted " + res.deletedCount)
      db.close();
    })
  })
})

The problem is that after adding res.send() to my code, now my route are all broken because of the Proxy error: Could not proxy request /total from localhstem_errors. This problem happened before. Actually it has been a warning since I created my react+express app, but it was just a warning and does not seem to affect my app, but now it does. Also, it is the res.send() in the post route that is causing the problem. In these get routers, res.send() was fine

Any fix to this? I feel like it is not going to be a trivial fix. May I have to restart my project?

1 Answer 1

1

Can you try setting your proxy in package.json like

"proxy": {
    "/*":  {
        "target": "http://localhost:3001"
    }
}

Regarding below error the res.sendStatus should be placed out of mongo connection

Can't set headers after they are sent

MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) { 
   if (err) throw err; 
   var dbo = db.db("cart"); 
   var objs = req.body; 
   dbo.collection("items").insertMany(objs, function(err, result) { 
   if (err) console.log(err); 
   console.log("Number of documents inserted: " + result.insertedCount); 
   db.close() 
   }); 
}); 
   res.sendStatus(200) 
});
Sign up to request clarification or add additional context in comments.

8 Comments

Getting rid of proxy or adding what you have both failed. As the add route response with Cannot POST /add
@aDev No holdon. What is the basepath of your backend service? You need replace your base path api name in place of basePath in my answer. I thought you will replace that with your backend service basepath. base path means you must be setting it in index.js file like app.use("/somepath", routes); like this
Let me post my server.js. I dont think I have a basepath, since the path it is all route
@aDev I got it. take my updated solution and give a try now
same thing. I am also getting the error from console that says:"Can't set headers after they are sent."
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.