带有CORS和JSON的Node JS空请求主体

Question

I am posting this topic regarding the problem the title suggests. I have seen several other questions regarding empty request bodies but none of them were helpful to me. Hopefully if I post my own code someone will be able to give me a good tip.

Basically I have a client using javascript to make CORS HTTPRequests to a Node.js server. Usually these HTTPRequests are posts of JSON objects.

Here a sample code of the client.

username = document.getElementById("username").value;
password = document.getElementById("password").value;
var str = '{"name":"'+username+'","pass":"'+password+'"}';
var req = new XMLHttpRequest();
req.open("POST","http://xxxx:8099/register",true)
req.setRequestHeader("Content-type", "application/json");
req.onreadystatechange = function() 
{
     //irrelevant
}
req.send(str);

}

Here is the code of the server.

var express    = require('express');
var bodyParser = require('body-parser');
var app = express();
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
extended: true
}));

// parse application/json
app.use(bodyParser.json());
app.listen(8099);
app.post("/register", function (req, res) {
console.log(req.body); // populated!
console.log(req.body.name);
res.send(200, req.body);
});

Now these are the results I have been getting:

If I set the request Content-type to application/json, then on the server I get an empty request body.

If I set the request Content-type to application/x-www-form-urlencoded, then I get a populated body, for example { '{"name":"usernamtest","pass":"123"}': '' }.

However, if I try to print req.body.name, I will get undefined wich means the body-parser did not properly parse the body to JSON.

How will I solve this? I just want to end up with a JSON object of those properties in the example.

For those who read this I thank you for your time. Complements, Ricardo Ferreira da Silva

Answer 1

Modern web browser have added a new security requirement that help curb unauthorized access to your webservice from another domain. CSRF (or Cross Site Request Forgery) hacking involves making HTTP requests from another domain to a web service in an attempt to breach server security and gain access to the potentially valuable data stored on a server. If the browser sees that the request is going to the same Domain as the website that the request is made from, then it allows the request to be made. If, however, the domains are different and the request involves something other than getting a static file, the browser first checks for permission to access the service from the server.

CORS headers (or Cross Origin Resource Sharing) are what the server should respond with to notify the browser what is allowed. CORS can whitelist domains, http methods, and specific headers.

This process is known as CORS Preflight.

Using the following header:

Access-Control-Allow-Origin: *

Essentially makes it so that all domains have access. The web service is completely public. This can leave a gaping security hole unless you intend your service to be public.

Access-Control-Request-Method indicates what HTTP methods are permitted. GET requests are often allowed by default if this is permitted.

Access-Control-Request-Age determines how long the CORS Preflight is good for. This is measured in seconds.

Access-Control-Allow-Headers indicates any headers that are accepted by the server.

I highly recommend learning about AJAX Hacking and ways to prevent it (if you haven't already).