Angular 4.0 : Set base url for REST calls

Question

我正在使用 spring boot、maven 和 eclipse 开发一个 Angular 项目。我想使用“ngserve”，这样我就不必每次都构建。因此，我尝试使用“ngserve”从 Angular 访问网页，并使用 REST 调用从 Spring Boot 获取数据。现在，由于我已经有很多 REST 调用，我不想转到每个文件并将 url 更改为 http://localhost:8080/api/inspection

我要添加http://localhost:8080所有 REST 调用。我尝试了下面的代码，但它仍然在调用 http://localhost :4200/api/inspection

创建 IqsInterceptor.ts:

import {  Injectable, } from '@angular/core';
import {  HttpRequest,  HttpHandler,  HttpEvent,  HttpInterceptor} from '@angular/common/http';
import {  Observable} from 'rxjs/Observable';

@Injectable()
export class IqsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'http://localhost:8080';
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

更新了app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AlertService} from './alert/alert.service';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

import {IqsInterceptor} from './IqsInterceptor';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        HttpModule,
        AppRoutingModule
    ],
    providers: [
        AppComponent,
        { provide: HTTP_INTERCEPTORS, useClass: IqsInterceptor, multi: true }

    ],
    declarations: [
        AppComponent,
        . . . Other components
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

您可以查看我之前的问题以获取更多信息: Angular 4 + springboot + Maven + Eclipse - Have to build everytime

Answer 1

您可以添加 proxy-conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }

}

您的 npm start 命令将更改为“ngserve --proxy-config proxy-conf.json -o”

由于 Angular 在开发服务器中运行，因此它将在端口 4200 中运行，而 spring boot 在端口 8080 中运行。当您在本地运行它时，您可以使用代理conf来告诉它将数据传递到不同的主机环境。