Angular2 http向其他端口上的nodejs服务器发送请求
我有一个在localhost：4200上运行的angular2应用程序，在localhost：3000上运行nodejs服务器。 我想用http.post将数据发布到服务器，但是在req.body或req.params的nodejs服务器中我得到了未定义的数据。 起初，我有从服务器呈现的angular2应用程序，这意味着我只有localhost：3000的nodejs，我根本没有任何问题，所以这不是sytax问题，但是当我想分开客户端和服务器，我不能'不发表任何要求。
GET请求的作品。
我有TodoService与服务器交互，并具有saveTodofunction。 newTodo是有效的，console.log提供了正确的信息。 我试过发布json和张贴与url-params和两个不工作：发布json：
saveTodo(newTodo: any) { let headers = new Headers(); headers.append('Content-Type','application/json'); return this.http.post('/api/v1/todo', JSON.stringify(newTodo), {headers: headers}) .map(res => res.json()); } 发布url参数：
saveTodo(newTodo: any) { let headers = new Headers(); headers.append('Content-Type','application/x-www-form-urlencoded'); let body = new URLSearchParams(); body.set('newTodo', newTodo); return this.http.post('/api/v1/todo', body, {headers: headers}) .map(res => res.json()); }
我从组件中调用这个函数：
addTodo(event: any) { let newTodo = { text: 'check', isCompleted: false }; this.todoService.saveTodo(newTodo).subscribe((x: Todo) => { this.todos.push(x) });
}
我得到两个选项未定义。 我也尝试使用FormData发布，但是这也不起作用。
起初我以为这是Cors问题，所以经过一番研究，我发现我需要用angular2定义代理，所以我创build了proxy.config.json文件：
{ "/api": { "target": "http://localhost:3000", "secure": "false" } }
所以每次我说route / api，我的意思是http://localhost:3000 ，nodejs服务器。
我也尝试用ionic2发布请求相同的方式，但也有同样的问题。 在ionic2中，我将以下内容添加到了ionic.config.json文件中：
"proxies" :[ { "path" :"/api", "proxyUrl" : "http://localhost:3000/api" }
这是我的app.js：
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var cors = require('cors'); var index = require('./routes/index'); var users = require('./routes/users'); var app = express(); // Get our API routes const api = require('./routes/api'); var todos = require ('./routes/todos'); app.use(cors()); // Set our api routes app.use('/api', api); app.use('/api/v1/',todos); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;
正如你所看到的，我也用npm和app.use（cors（））一起使用了cors包。
这里是路线：
router.post('/todo',function (req,res,next) { var todo = req.body; if(!todo.text || !(todo.isCompleted + '')){ res.status(400); res.json({ "error": "Invalid Data" }); }else{ db.todos.save(todo,function (err,result) { if(err){ res.send(err); }else{ res.json(result); } }) } });
请帮助我，谢谢。
编辑：这是@jaaaaaay想要的日志请求：
IncomingMessage { _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: BufferList { head: null, tail: null, length: 0 }, length: 0, pipes: null, pipesCount: 0, flowing: null, ended: false, endEmitted: false, reading: false, sync: true, needReadable: false, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: true, decoder: null, encoding: null }, readable: true, domain: null, _events: {}, _eventsCount: 0, _maxListeners: undefined, socket: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 626, _externalStream: {}, fd: -1, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Function: socketOnError], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 2718, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 1, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {} } }, connection: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 626, _externalStream: {}, fd: -1, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Function: socketOnError], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 2718, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 1, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {} } }, httpVersionMajor: 1, httpVersionMinor: 1, httpVersion: '1.1', complete: false, headers: { connection: 'keep-alive', 'content-length': '29', pragma: 'no-cache', 'cache-control': 'no-cache', accept: 'application/json, text/plain, */*', origin: 'http://localhost:8100', 'user-agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36', 'content-type': 'application/x-www-form-urlencoded', referer: 'http://localhost:8100/', 'accept-encoding': 'gzip, deflate, br', 'accept-language': 'he-IL,he;q=0.8,en-US;q=0.6,en;q=0.4', cookie: 'Webstorm-b127fad0=32f013a9-8b83-4566-a999-5f35bf7360c8; io=uJyvB9XFivORLmROAAAC', host: 'localhost:3000' }, rawHeaders: [ 'connection', 'keep-alive', 'content-length', '29', 'pragma', 'no-cache', 'cache-control', 'no-cache', 'accept', 'application/json, text/plain, */*', 'origin', 'http://localhost:8100', 'user-agent', 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36', 'content-type', 'application/x-www-form-urlencoded', 'referer', 'http://localhost:8100/', 'accept-encoding', 'gzip, deflate, br', 'accept-language', 'he-IL,he;q=0.8,en-US;q=0.6,en;q=0.4', 'cookie', 'Webstorm-b127fad0=32f013a9-8b83-4566-a999-5f35bf7360c8; io=uJyvB9XFivORLmROAAAC', 'Host', 'localhost:3000' ], trailers: {}, rawTrailers: [], upgrade: false, url: '/todo', method: 'POST', statusCode: null, statusMessage: null, client: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 626, _externalStream: {}, fd: -1, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Function: socketOnError], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 4, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 2718, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 1, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {} } }, _consuming: false, _dumped: false, next: [Function: next], baseUrl: '/api/v1', originalUrl: '/api/v1/todo', _parsedUrl: Url { protocol: null, slashes: null, auth: null, host: null, port: null, hostname: null, hash: null, search: null, query: null, pathname: '/todo', path: '/todo', href: '/todo', _raw: '/todo' }, params: {}, query: {}, res: ServerResponse { domain: null, _events: { finish: [Function: resOnFinish] }, _eventsCount: 1, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: Socket { connecting: false, _hadError: false, _handle: [Object], _parent: null, _host: null, _readableState: [Object], readable: true, domain: null, _events: [Object], _eventsCount: 10, _maxListeners: undefined, _writableState: [Object], writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: [Object], _server: [Object], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Object], _idleStart: 2718, parser: [Object], on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: [Circular] }, connection: Socket { connecting: false, _hadError: false, _handle: [Object], _parent: null, _host: null, _readableState: [Object], readable: true, domain: null, _events: [Object], _eventsCount: 10, _maxListeners: undefined, _writableState: [Object], writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: [Object], _server: [Object], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Object], _idleStart: 2718, parser: [Object], on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: [Circular] }, _header: null, _headers: { 'x-powered-by': 'Express', 'access-control-allow-origin': '*' }, _headerNames: { 'x-powered-by': 'X-Powered-By', 'access-control-allow-origin': 'Access-Control-Allow-Origin' }, _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {} }, route: Route { path: '/todo', stack: [ [Object] ], methods: { post: true } } }
那么，我find了答案，我不能相信这太容易了…浪费了3天来解决它，但后来我发现这一个：
我在使用body-parser包之前定义了路由，这就是为什么我没有定义。
对于Angular 2请求，Nodejs返回undefined