在Angular项目的根目录中,编辑一个名为“proxy.conf.json”的文件。下面是一个示例配置:
{ "/api/*": { "target": "http://localhost:3000", "secure": false, "logLevel": "debug" } }
配置文件指示代理将所有/api/前缀的请求转发到http://localhost:3000。注意,secure属性设置为false,以允许在(本地)开发过程中使用不安全的http协议。logLevel属性可用于帮助调试。
在angular.json文件的“architect”部分中,找到“serve”配置。在这里,检查“options”对象,确保它包含“proxyConfig”属性并指向proxy.conf.json文件:
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project-name:build", "proxyConfig": "proxy.conf.json" }, "configurations": { "production": { "browserTarget": "your-project-name:build:production" } } }
在应用程序中,如果需要使用代理服务,则需要注入HttpClientModule,并为Http服务提供带有baseHref(比如“/api/”)的URL。例如:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [ { provide: 'BASE_URL', useValue: 'http://localhost:3000' } ], bootstrap: [ AppComponent ] }) export class AppModule { }
在此示例中,HttpClientModule被导入,HttpClient被注入,并且应用程序使用了一个名为'BASE_URL'的注入令牌。在组件中,您可以使用以下代码使用baseUrl:
import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public data: any;
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) { http