快速发布请求在 chrome 中超时

Question

I am new to API development and am trying to create a post request and send data to an API but it keeps timing out in chrome. The error I am getting is net::ERR_EMPTY_RESPONSE. This is my js where I am trying to send the info. It is called in another method called addToCart() where I am passing in the cart as a parameter.

function sendToAPI(cart) {
  var req = new XMLHttpRequest();
  req.open('POST', '/add');
  req.setRequestHeader('Content-Type', 'application/json');
  req.send(JSON.stringify({cart : cart}));
  req.addEventListener('load', () => {
    console.log(req.resonseText);
  })
  req.addEventListener('error', () => {
    console.log('There was an error');
    console.log(error);
  });

}

This is where I am creating the API:

const express = require("express");
const bodyParser = require("body-parser");

const api = express();

api.use(express.static(__dirname + '/public'));
api.use(bodyParser);

api.listen(3000, function() {
  console.log("Server is running on port 3000");
});


api.post('/add', function(req, res) {
  console.log(req.body);
  res.send("It works");
});

Answer 1

I see a couple problems. First, this is not correct:

api.use(bodyParser);

For a JSON response, you would do this:

api.use(bodyParser.json());

And, body-parser is built into Express so you don't need to manually load the body-parser module. You can just do this:

api.use(express.text());

---

Then, in your client-side code, this:

console.log(req.resonseText);

is misspelled and should be this:

console.log(req.responseText);

---

And, in your client-side code, you should also be checking the status code returned by the response.

FYI, the new fetch() interface in the browser is soooo much nicer to use than XMLHttpRequest .