proxy.config.json
的文件,包含以下内容:{
"/api/*": {
"target": "http://localhost:5000",
"secure": false
}
}
package.json
中添加以下命令:"start": "ng serve --proxy-config proxy.config.json"
Startup.cs
中添加以下代码:public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
}
app.module.ts
中添加以下代码:import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ApiService {
private apiUrl = '/api'; // 相对路径
constructor(private http: HttpClient) {}
getUsers() {
return this.http.get(`${this.apiUrl}/users`);
}
}
这样,将在http://localhost:4200/api
下代理到http://localhost:5000/api
。