服务器不接收角度http请求

时间:2018-02-18 23:33:52

标签: javascript node.js angular express angular-httpclient

我会将数据发送到我的数据库。

所以我在我的component.ts中创建我的函数,它调用我的服务

ajoutText(newtext: String) {
  this.dataService.sendtext(newtext);
}

并在HTML方面

<form class="form">
  <mat-form-field class="textinput">
    <input #newtext matInput placeholder="Ajoutez votre texte" value="">
  </mat-form-field>
  <button type="button" mat-raised-button color="primary" (click)="ajoutText(newtext.value)">Ajouter</button>

</form>

然后我的服务将数据发送到服务器

export class AjouttextService {
  url = "http://127.0.0.1:8080/v1";
  constructor(private http: HttpClient) { }

  sendtext(text): Observable<string> {
    console.log(text);
    return this.http.post<string>(this.url, text);
  }
}

我的console.log(text)打印出我在输入字段中输入的文本。

在我的服务器端,我使用Express

var http = require("http");
var admin = require('firebase-admin');
var firebase = require("firebase");
var express = require("express");
var app = express();
var routerProj = require("./routes/routes");
var bodyParser = require("body-parser");
var port = process.env.app_port || 8080; // set our port
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var server = app.listen(port);

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,*");
  next();
});
var config = {
  apiKey: "XXXXXXXXXXX",
  authDomain: "datatable-18f93.firebaseapp.com",
  databaseURL: "https://datatable-18f93.firebaseio.com",
  projectId: "datatable-18f93",
  storageBucket: "datatable-18f93.appspot.com",
  messagingSenderId: "282475200118"
};
firebase.initializeApp(config);


var serviceAccount = require("./ServiceAcountKey.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://datatable-18f93.firebaseio.com"
});
app.use("/v1", routerProj);
//Create HTTP server and listen on port 8000 for requests

// Print URL for accessing server
console.log("Server running at http://127.0.0.1:8080/");

然后在我的路由器中,我在Firebase数据库中插入数据

router.use(function (req, res, next) {
  // do logging
  console.log("HI");
  next(); // 
});
...
router
  .route("/")
  .post(function (req, res, err) {
    console.log("test")
    // Get a database reference to our posts
    var db = admin.database();
    var ref = db.ref("/");

    // Attach an asynchronous callback to read the data at our posts reference
    ref.push(
      {
        "text": req.body
      }

    );

  });

问题是我的服务器没有检测到客户端发送的请求。路径第一行的console.log(“test”)不会在我的控制台上打印“test”,也不会在console.log('Hi')上打印..

服务器正在运行并且是客户端。我不知道为什么不使用该路线。

2 个答案:

答案 0 :(得分:3)

你快到了。您忘记了一行代码,这是Angular中的常见错误。

您忘了订阅sendText功能。如果您没有订阅,您的http呼叫将不会启动!

this.dataService.sendtext(newtext).subscribe( data => console.log(data));

答案 1 :(得分:0)

我在Glitch上汇总了一个示例后端API:

https://glitch.com/edit/#!/sun-sardine?path=server.js:1:0

获取请求将是https://sun-sardine.glitch.me/api/articles。以下是Postman的屏幕截图,向您展示如何通过邮寄请求访问API:

Postman

有关使用Node / Express创建API的更多信息,我发现Gothinkster RealWorld Node Express示例应用程序是一个很好的起点:

https://github.com/gothinkster/node-express-realworld-example-app

我希望这会有所帮助:)