我正在学习从angular调用node，在我的组件中我有以下代码
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":""}
}
}
尽管如此，当我调用student时，angular服务调用http://localhost:4200/api/student，而不是端口3000上的node服务，哪里会出错呢？我使用npm run start来启动angular应用程序
您必须定义您的baseUrl，如果您不这样做，那么您将使用您在角度端口选项中定义的baseUrl，即localhost:4200。
因此连接到节点所需的代码如下:
我建议将api url保留在environment中，这样您就可以轻松地在不同的环境中移动它，如下所示:
export const environment = {
production: false,
api: 'http://localhost:3000'
};
然后，您的服务ts文件将包括来自环境的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`);
}
}
