无法从angular调用节点服务

Question

我正在学习从angular调用节点，在我的组件中，我有以下代码

import { Component, OnInit } from '@angular/core';
import {GetvalidationService} from '../_services/getvalidation.service';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
constructor(private service:GetvalidationService) { }
ngOnInit(): void {
this.getStudentData();
}
studentDetails :any =[]  
getStudentData(){
this.service.getStudentData().subscribe()
}
}

服务定义如下

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class GetvalidationService {
constructor(private http:HttpClient) { }
authenticateLogin(userDetails){

return this.http.post("/api/login",userDetails)
}
getStudentData(){
return this.http.get("/api/student");
}
}

我已经在package.json和中完成了proxy.conf.json设置

我的proxy.conf.json看起来像

{
"/api/*":{
"target":"http://localhost:3000",
"secure": false,
"changeOrigin": true,
"pathrewrite":{"^/api":""}
}
}

尽管如此，当我为学生打电话时，角服务会打电话给http://localhost:4200/api/student而不是端口3000上的节点服务，我会在哪里出错？我使用npm运行开始启动角度应用

Answer 1

您必须定义您的baseUrl，如果您不这样做，那么您最终会得到您在角端口选项中定义的一个，即localhost:4200。

因此，连接到节点所需的代码如下：

我建议将api url保存在环境中，这样您就可以轻松地在不同的环境中移动它，比如

export const environment = {
production: false,
api: 'http://localhost:3000'
};

然后，您的服务ts文件将包括来自environment:的api

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class GetvalidationService {

private baseUrl= environment.api + '/api';  // URL to your web api

constructor(private http:HttpClient) { }
authenticateLogin(userDetails){

return this.http.post(`${this.baseUrl}/login`,userDetails)
}
getStudentData(){
return this.http.get(`${this.baseUrl}/student`);
}
}