问题
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:
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)
});
来源：https://stackoverflow.com/questions/52653534/react-express-proxy-error-could-not-proxy-request-total-from-localhstem-err