无法获取/ Node js

问题描述 投票:0回答:1

我正在尝试使用此类连接开始提供一些静态网页:

const express = require ('express');
const bodyParser = require ('body-parser');
const cors = require ('cors');

const app = express();
const port = 3000;

app.use(bodyParser.text());
app.use(cors());

app.post('/api/pesan', (req, res) => {
    console.log(req.body);
    res.status(200).send();
})

app.listen(port, () => console.log('Aplikasi berjalan di port', port));

这是我的app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pesan = '';

  constructor (private http: HttpClient){}

  kirim(){
    console.log(this.pesan);
    this.http.post('http://localhost:3000/api/pesan', this.pesan).toPromise();
    }

 )

我制作newfolder / backend并将server.js放在此处。我想将节点与app.component.html连接,但出现此错误

node.js
1个回答
0
投票

根据我的收集,您想做两件事:

  1. 创建一个API并返回您发布的数据。
  2. 从前端调用该API端点并console.log(...)数据

这是应该工作的更新代码,以及为什么以前不起作用:

节点服务器

我只是返回了数据

const express = require ('express');
const bodyParser = require ('body-parser');
const cors = require ('cors');

const app = express();
const port = 3000;

app.use(bodyParser.text());
app.use(cors());

app.post('/api/pesan', (req, res) => {
    console.log(req.body);
    // UPDATED: This time, we return the data you passed
    res.status(200).send(req.body);
})

app.listen(port, () => console.log('Aplikasi berjalan di port', port));

Angular应用

您实际上能够正确调用您的端点,但是您对使用.toPromise()创建的承诺没有做任何事情。我更新了代码来处理该问题。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pesan = '';

  constructor (private http: HttpClient){}

  kirim(){
    this.http.post('http://localhost:3000/api/pesan', this.pesan)
       .toPromise()
       .then(response => { 
          const data = response.json();
          console.log(data); 
       });
  }

}
© www.soinside.com 2019 - 2024. All rights reserved.