无法将 HTTP 请求从 Angular 发布到节点 js localhost 服务器答案

【问题标题】：Unable to post HTTP request from angular to node js localhost server无法将 HTTP 请求从 Angular 发布到节点 js localhost 服务器
【发布时间】：2022-11-09 19:46:47
【问题描述】：

我有一个 express 节点 js 服务器，它在 3000 端口监听 localhost，并打印 JSON 内容。如果我使用邮递员，它会正确打印 JSON。

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())

var port = 3000;

app.post('/instance', function(req, res) {
    const obj = JSON.parse(JSON.stringify(req.body))
    console.log(obj);
    //res.send(req.body);
});


// start the server
app.listen(port);
console.log('Server started! At http://localhost:' + port);

在 Angular html 中，我有一个 ngFor，它在单击按钮时发送一个列表项。

<ng-container *ngFor="let instance of instancesList">
    <tr class="col-sm border border-primary" style="color:#111111">
      <td>{{instance.id}}</td>
      <td>{{instance.name}}</td>
      <td>{{instance.zone}}</td>
      <td>{{instance.ip}}</td>
      <td> <button (click)="onClick(instance)" type="button" class="btn border-primary btn-lg">test</button></td>
    </ng-container>

此时，当单击按钮时，我希望将带有项目数据的 JSON 发送到服务器，然后打印出来。它不会发生，服务器不打印 json 内容，但如果从邮递员发送，它会打印内容。

我已经挣扎了几天了，我很感激任何帮助。


const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
  })
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

@Injectable({providedIn:'root'})
export class AppComponent{
  instancesList = instances;
  baseUrl = "http://localhost:3000/instance"

  constructor(private http: HttpClient) { } 

  onClick(instance: Instance) : Observable<Instance>{
    const json = JSON.stringify(instance)

    return this.http.post<Instance>(this.baseUrl, json, httpOptions)

    // prints the json on the webpage just for testing
    alert(JSON.stringify(instance));       
}
}

我尝试搜索stackoverflow并尝试不同的方法，没有任何帮助。

【问题讨论】：

标签： node.js angular post

【解决方案1】：

你没有 subscribe 到从 HTTP 请求返回的 Observable。简单地而不是返回它 - 这样做：

this.http.post<Instance>(this.baseUrl, json, httpOptions).subscribe(data => 
 { 
   // here you can do something with the data that returned
 })

【讨论】：

我已经试过了，它仍然不起作用。 onClick(instance: Instance){ const json = JSON.stringify(instance) this.http.post<Instance>(this.baseUrl, json, httpOptions).subscribe(data => { console.log(data) }) //警报（JSON.stringify（实例））； }
这不是你“尝试”的东西——你需要subscribe，否则什么都不会发生。
还从那里删除alert - 它阻止了应用程序
我编辑它以订阅而不是返回它。但它仍然不起作用。 http帖子还有其他问题吗？ http构造函数中必须有任何东西吗？ תודהמראש
试着看看你有什么错误：this.http.post<Instance>(this.baseUrl, json, httpOptions).subscribe(data => { // here you can do something with the data that returned }, error => console.log(error))

【解决方案2】：

所以以防万一，将来有人发现这个问题与其他事情有关

由于浏览器的同源策略导致的 CORS 错误。为了解决这个问题，您需要告诉您的浏览器启用您的客户端和您的服务器在不同的情况下共享资源起源。也就是说，需要开启跨域资源在您的应用程序中共享或 CORS。

解决方案是按照官方角度文档中的说明添加代理配置。 https://angular.io/guide/build#proxying-to-a-backend-server

【讨论】：