node.js - Express - bodyParser.json() 和 cors() 不能一起工作

Question

我正在使用nodeJs body-parser并从HTML页面向我的nodeJS API发出CORS请求，但是在这样做时我收到了“意外 token ”的错误。

NodeJS 服务器错误

    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)

HTML 控制台窗口出现错误

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

NodeJS API代码

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 页面 - API 调用

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);
                });

但是，相同的代码可以从 POSTMAN 实用程序成功执行。

请提出我在这里缺少的内容。

Answer 1

我认为这实际上不是 CORS 的问题，而是 POST 编码的问题。我相信您实际上正在发送 url 编码数据。

POST 在 Postman 中运行良好，因为它将数据编码为 JSON。

如果我们稍微重写服务器代码:

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);

您将看到 AJAX 请求实际上是这样传入的:

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

我建议将您的 Ajax 调用(在客户端)修改为:

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);
});