CODEWITHSUNDEEP
node.jsexpress
Arayn
Arayn

Reputation: 1106

express - bodyParser.json() and cors() not working together

I am using nodeJs body-parser and making CORS request from HTML page to my nodeJS API, however while doing so I am getting error for "unexpected token".

Error on NodeJS server

    Listening http on port: 3001
SyntaxError: Unexpected token # in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (E:\RnD\src\node_modules\body-parser\lib\types\json.js:157:10)
    at parse (E:\RnD\src\node_modules\body-parser\lib\types\json.js:83:15)
    at E:\RnD\src\node_modules\body-parser\lib\read.js:121:18
    at invokeCallback (E:\RnD\src\node_modules\raw-body\index.js:224:16)
    at done (E:\RnDsrc\node_modules\raw-body\index.js:213:7)
    at IncomingMessage.onEnd (E:\RnD\src\node_modules\raw-body\index.js:273:7)
    at emitNone (events.js:106:13)
    at IncomingMessage.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1055:12)

Error on HTML Console Window

localhost:3001/postCustomer:1 POST http://localhost:3001/postCustomer 400 (Bad Request)

NodeJS API code

var initHttpServer = () => {
    var app = express();
    var cors = require('cors');

    app.use(cors());
    app.options('*', cors());  // enable pre-flight
    app.use(bodyParser.json());
    app.post('/postCustomer', (req, res) => {
        console.log('customer added: ' );
        res.send();
    });

HTML Page - API Call

var settings = {
                "async": true,
                "crossDomain": true,
                "url": "http://localhost:3001/postCustomer",
                "method": "POST",
                "headers": {
                    "cache-control": "no-cache",
                    "content-type": "application/json"                    
                },
                "data": {
                        "name": $("#name").val(),
                        "address": $("#address").val(), 
                        "gender": $("#gender").val(),
                        "dob":$("#dob").val()}
                }

                $.ajax(settings).done(function (response) {
                console.log(response);
                });

However the same code is executing successfully from POSTMAN utility.

Please suggest what I am missing here.

Upvotes: 1

Views: 5167

Answers (3)

Farhan
Farhan

Reputation: 1505

I faced the same issue

    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (/Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/body-parser/lib/types/json.js:158:10)
    at parse (/Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/body-parser/lib/types/json.js:83:15)
    at /Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/body-parser/lib/read.js:121:18
    at invokeCallback (/Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/raw-body/index.js:224:16)
    at done (/Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/raw-body/index.js:213:7)
    at IncomingMessage.onEnd (/Users/careaxiom/Documents/WorkEnvironment/monster_pool/mp-api/node_modules/raw-body/index.js:273:7)
    at IncomingMessage.emit (events.js:322:22)
    at endReadableNT (_stream_readable.js:1187:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

This solved my problem app.use(bodyParser.json({strict: false}));

Upvotes: 0

Terry Lennox
Terry Lennox

Reputation: 30685

I don't think this is a problem with CORS actually, rather with POST encoding. I believe you're actually sending url encoded data.

The POST works fine in Postman because it's encoding the data as JSON.

If we re-write the server code slightly to:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var cors = require('cors');

var rawBodyHandler = function (req, res, buf, encoding) {
    if (buf && buf.length) {
        req.rawBody = buf.toString(encoding || 'utf8');
        console.log('Raw body: ' + req.rawBody);
    }
}

app.use(cors({ allowedHeaders: 'Content-Type, Cache-Control' }));
app.options('*', cors());  // enable pre-flight

app.use(bodyParser.json({ verify: rawBodyHandler }));

app.post('/postCustomer', (req, res, next) => {
    console.log('customer added: ', JSON.stringify(req.body));
    res.send();

    //next();
});


app.listen(3001);

You'll see that the AJAX request is actually coming in like this:

Raw body: name=Tommy+D.&address=21+Saltair+Av.%2C+Brentwood%2C+CA&gender=m&dob=1980-21-08

I'd suggest modifying your Ajax call (on the client) to:

var jsonData = {
                    "name": $("#name").val(),
                    "address": $("#address").val(), 
                    "gender": $("#gender").val(),
                    "dob":$("#dob").val()}
};

var settings = {
                "async": true,
                "crossDomain": true,
                "url": "http://localhost:3001/postCustomer",
                "method": "POST",
                "headers": {
                    "Cache-Control": "no-cache"
                },
                "data":  JSON.stringify(jsonData),
                "contentType": "application/json"
};

$.ajax(settings).done(function (response) {
    console.log(response);
});

Upvotes: 3

Damjan Pavlica
Damjan Pavlica

Reputation: 33973

Actually, there are two body parsers for two common POST request types: urlencoded and json.

So, in our app we are using:

app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

Upvotes: 1

Related Questions