当我在节点服务器上打印请求的内容时,我无法在任何地方看到用户数据。
这是我的节点服务器:
var http = require('http');
http.createServer( function (request, response) {
console.log(request);
}).listen(8080);
console.log('Server running at http://127.0.0.1:8080/');
这是Angular2代码:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Http, Response, Headers , RequestOptions } from "@angular/http";
import 'rxjs/add/operator/retry'; // to be able to retry when error occurs
import { Observable } from "rxjs/Rx";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'Angular Test';
user = { id : 1, name : "Hello"};
constructor (private http: Http) {}
ngOnInit(): void {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
console.log(this.user);
this.http.post("http://localhost:8080/", this.user, options)
.subscribe(
(err) => {
if(err) console.log(err);
console.log("Success");
});
}
}
任何人都可以帮我解释或解释如何处理角度中的http请求。
答案 0 :(得分:12)
那是你的服务器:
const express = require('express')
const bodyParser = require('body-parser');
const app = express()
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );
app.all("/*", function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
next();
});
app.post('/ping', function (req, res) {
res.send(req.body)
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
那是你的角色客户:
import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = { id : 1, name : 'Hello'};
constructor(private http: HttpClient) { }
callServer() {
const headers = new HttpHeaders()
.set('Authorization', 'my-auth-token')
.set('Content-Type', 'application/json');
this.http.post('http://127.0.0.1:3000/ping', JSON.stringify(this.user), {
headers: headers
})
.subscribe(data => {
console.log(data);
});
}
}
repo https://github.com/kuncevic/angular-httpclient-examples
答案 1 :(得分:2)
我已经在我们的文档页面中写了这个,但由于现在已弃用,我将在此处复制。
你的节点部分app.js应该是这样的(假设你正在使用expressjs和node.js):
<强> app.js:强>
var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');
server.listen(process.env.PORT || 8080, function(){
console.log("Server connected. Listening on port: " + (process.env.PORT || 8080));
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );
app.use( express.static(__dirname + '/front' ) );
app.post('/test', function(req,res){ //**** http request receiver ****
var myTestVar = "Hello World";
return res.send(myTestVar);
});
//send the index.html on every page refresh and let angular handle the routing
app.get('/*', function(req, res, next) {
console.log("Reloading");
res.sendFile('index.html', { root: __dirname });
});
当您向localhost:8080/test
发布内容时,此节点会进行配置,您将在订阅回调中收到myTestVar
作为回复。