Angular 4.0：如何统一为所有REST请求设置基础URL

Hey there! 我来帮你搞定这个不用逐个修改请求地址的问题，毕竟手动改一堆文件太折腾人了😉 下面给你几个实用的方案，按需选择就行：

方案一：使用HTTP拦截器（全局统一处理，最推荐） #

这个方法能自动给所有相对路径的请求加上基础URL，完全不用改现有请求代码：

1. 创建拦截器文件
   在你的项目里新建一个base-url.interceptor.ts文件，代码如下：

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

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 只给相对路径的请求添加基础URL，避免影响第三方API请求
    if (!request.url.startsWith('http')) {
      const modifiedRequest = request.clone({
        url: `http://localhost:8080${request.url}`
      });
      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }
}

2. 注册拦截器
   打开app.module.ts，把拦截器注册到模块的providers里：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BaseUrlInterceptor } from './base-url.interceptor'; // 注意路径要对应你的文件位置

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: BaseUrlInterceptor,
      multi: true // 允许多个拦截器共存
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

搞定！现在你原来写的/api/inspection会自动变成http://localhost:8080/api/inspection，所有请求都不用改。

方案二：环境变量+封装API服务 #

如果不想用拦截器，也可以通过封装服务的方式统一管理基础URL：

1. 配置环境变量
   打开src/environments/environment.ts，添加基础URL配置：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080'
};

2. 封装API服务
   新建一个api.service.ts，把HttpClient的方法封装一层，自动拼接基础URL：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '../environments/environment';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.apiBaseUrl;

  constructor(private http: HttpClient) { }

  // 封装GET请求
  get<T>(endpoint: string, params?: HttpParams, headers?: HttpHeaders): Observable<T> {
    return this.http.get<T>(`${this.baseUrl}${endpoint}`, { params, headers });
  }

  // 封装POST请求
  post<T>(endpoint: string, body: any, headers?: HttpHeaders): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}${endpoint}`, body, { headers });
  }

  // 同理可以封装PUT、DELETE等其他请求方法
}

之后所有组件/服务里都用这个ApiService发请求，比如原来的this.http.get('/api/inspection')改成this.apiService.get('/api/inspection')，后续要改基础URL只需要改环境变量就行。

方案三：Proxy代理（同时解决跨域问题） #

如果你的Angular项目跑在默认的4200端口，直接请求8080的后端会有跨域问题，用proxy配置既能统一URL，又能解决跨域：

1. 创建proxy配置文件
   在项目根目录新建proxy.conf.json，内容如下：

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

这里的/api/*表示所有以/api开头的请求都会被代理到目标地址。

2. 配置Angular启动项
   打开angular.json，找到projects -> 你的项目名 -> architect -> serve -> options，添加proxyConfig配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名:build",
    "proxyConfig": "proxy.conf.json"
  },
  /* 其他配置 */
}

现在你在代码里直接写/api/inspection，ng serve会自动把请求转发到http://localhost:8080/api/inspection，而且不会有跨域报错，开发环境下特别好用。

小提示 #

如果配置后请求还是指向原来的地址，大概率是缓存问题：

• 重启ng serve
• 清除浏览器缓存（按Ctrl+Shift+R强制刷新）

内容的提问来源于stack exchange，提问作者SK.