首页 文章

如何从角度到节点服务器发出请求

提问于
浏览 次
2

当我在节点服务器上打印请求的内容时，我无法在任何地方看到用户数据 .

这是我的节点服务器：

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请求 .

node.js angular http

2 回答

  • 6

    那是你的服务器：

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

    回购https://github.com/kuncevic/angular-httpclient-examples

    回复于
  • 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 作为响应 .

    回复于

相关问题