Angular 2 + NodeJS + Mongoose - 从 Angular 2 发布数据到 rest api nodejs 后端。节点 api 日志：选项 /url，POST 标头不起作用

Posted 2023-03-11

【中文标题】Angular 2 + NodeJS + Mongoose - 从 Angular 2 发布数据到 rest api nodejs 后端。节点 api 日志：选项 /url，POST 标头不起作用

【英文标题】：Angular 2 + NodeJS + Mongoose - post data from angular 2 to rest api nodejs backend. Node api logs: OPTION /url, POST headers doesnt work

【发布时间】：2017-02-17 22:10:09

【问题描述】：

我在将数据从 angular2 前端 api 发布到后端客户端时遇到问题 - nodeJS + mongoose。 在 Angular2 客户端上，我使用要发送的数据制作 console.log，并且服务显示正确的值。

在 NodeJS 后端我也尝试 console.log 发布数据，但我没有定义。请查看下面的代码，并尝试找出我做错了什么。我也尝试过使用Promise<> 和Observable<>，效果相同。

PS。通过 Angular 2 从 NodeJS api 获取数据运行良好。

PS2。重要的事实，问题存在，因为 angular2 不会在 post 或 put 中创建标题。每次，当我发出 POST Req 时，NODE Server 都会记录OPTION /login。那是什么意思？

Angular2：

signIn(data: Object): Observable<User> 
    let bodyString = JSON.stringify(data);

    let headers = new Headers(
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    );
    let options = new RequestOptions( headers: headers );

    console.log("data: ", data, "\nbodyString: ", bodyString, "\nHeaders: ", headers, "\nOptions: ");

    return this.http
        .post( this.signInUrl, bodyString, headers: headers)
        .map( (res:Response) => res.json() )
        .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

NodeJS：

[...]
// configure app
app.use(morgan('dev'));

app.use(bodyParser.urlencoded( extended: true ));
app.use(bodyParser.json());

var mongoose    = require('mongoose');

var Test        = require('./model/test');
var User        = require('./model/user.schema');

mongoose.connect('mongodb://localhost:27017/lounge');

app.set('secret', config.secret);

app.get('/', function(req, res) 
    res.json( message: 'hooray! welcome to our api!' );
);    
app.post('/login', function (req, res) 
        console.log("Recived login request!", req.body);
    );
[...]

【问题讨论】：

它应该可以正常工作。你能把扩展值设为假吗？ extended: false

感谢您的评论，我应该在哪里传递值扩展：false？

在这一行 app.use(bodyParser.urlencoded( extended: true ));设置为假

我改变了这个，但没有结果。当我从“POSTMAN”发出 POST 请求时，一切正常，节点服务器正确显示 req.body。

你成功了吗？我遇到了类似的问题

【参考方案1】：

我认为您的问题是您如何通过不使用您创建的 RequestOptions 对象来发出发布请求。

signIn(data: Object): Observable<User> 
let bodyString = JSON.stringify(data);

let headers = new Headers(
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
);
let options = new RequestOptions( headers: headers );

console.log("data: ", data, "\nbodyString: ", bodyString, "\nHeaders: ", headers, "\nOptions: ");

return this.http
    .post( this.signInUrl, bodyString, options) // **Change happens here
    .map( (res:Response) => res.json() )
    .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

唯一的变化是使用您声明的选项（RequestOptions），而不是尝试在 post 方法中定义“ headers: headers ”。

这是我第一次发帖。我希望这会有所帮助，并且此帖子正确。

【参考方案2】：

我认为问题在于 nodejs 和 angular cominication。因为它们在不同的端口上工作，所以它们无法通信。因此，您应该将此代码作为中间件添加到 nodejs 中，并且我建议您搜索“cors express”和“cors npm package”。我希望这能解决你的问题。

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
);