如何基于腳手架配置Angular代理

# 如何基于腳手架配置Angular代理

## 前言

在現代前端開發中，前后端分離的架構已成為主流。開發過程中，前端應用通常運行在獨立的開發服務器上（如Angular CLI提供的`ng serve`），而需要訪問后端API接口時，常會遇到跨域問題。通過配置代理（Proxy），我們可以優雅地解決這個問題。本文將詳細介紹如何在Angular項目中基于腳手架配置代理。

---

## 一、為什么需要配置代理？

### 1.1 跨域問題
瀏覽器出于安全考慮，會限制跨域請求（CORS）。當你的前端應用運行在`http://localhost:4200`，而API服務運行在`http://api.example.com`時，直接請求會觸發CORS錯誤。

### 1.2 開發環境模擬
代理允許你將特定路徑的請求轉發到另一個服務器，這在以下場景非常有用：
- 避免開發時頻繁修改API基礎URL
- 模擬尚未完成的后端接口
- 統一處理請求/響應

---

## 二、Angular CLI代理配置基礎

Angular CLI使用Webpack Dev Server作為開發服務器，其代理功能基于[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)。配置只需三個步驟：

### 2.1 創建代理配置文件
在項目根目錄下創建`proxy.conf.json`文件（也可以是`.js`或`.ts`格式）：

```json
// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

2.2 修改啟動命令

在angular.json中配置代理：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

或通過命令行啟動：

ng serve --proxy-config proxy.conf.json

2.3 驗證代理

啟動應用后，訪問http://localhost:4200/api/users將被代理到http://localhost:3000/api/users。

三、高級代理配置技巧

3.1 路徑重寫

當后端API路徑與前端不匹配時，可以使用pathRewrite：

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": { "^/api": "/backend/api" }
  }
}

3.2 多目標代理

支持配置多個代理目標：

{
  "/api": {
    "target": "http://api.example.com",
    "secure": false
  },
  "/auth": {
    "target": "http://auth.example.com",
    "secure": false
  }
}

3.3 動態代理（使用JavaScript配置）

創建proxy.conf.js實現復雜邏輯：

const PROXY_CONFIG = {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        return "/index.html";
      }
    }
  }
};

module.exports = PROXY_CONFIG;

四、常見問題解決方案

4.1 WebSocket代理

需要特殊處理WebSocket連接：

{
  "/socket.io": {
    "target": "ws://localhost:3001",
    "ws": true
  }
}

4.2 代理日志調試

添加logLevel參數查看詳細日志：

{
  "/api": {
    "target": "http://localhost:3000",
    "logLevel": "debug"
  }
}

4.3 自簽名證書問題

如果目標服務器使用自簽名證書，需設置：

{
  "secure": false,
  "rejectUnauthorized": false
}

五、結合環境配置的最佳實踐

5.1 環境差異化配置

結合Angular環境文件實現不同環境的代理：

// environments/environment.ts
export const environment = {
  production: false,
  apiUrl: '/api'
};

// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000"
  }
}

5.2 與docker-compose集成

在容器化開發環境中：

# docker-compose.yml
services:
  frontend:
    command: ng serve --host 0.0.0.0 --proxy-config proxy.conf.json
  backend:
    image: my-backend
    ports:
      - "3000:3000"

六、注意事項

1. 生產環境無效：代理配置僅作用于ng serve開發服務器
2. 路徑匹配規則：遵循Express風格的路徑匹配
3. 性能影響：頻繁的代理轉發可能影響開發體驗
4. 緩存問題：修改代理配置后需要重啟服務

結語

通過合理配置代理，Angular開發者可以無縫連接后端服務，顯著提升開發效率。本文涵蓋了從基礎配置到高級技巧的全方位指南，建議根據實際項目需求靈活組合使用。更多配置選項可參考Webpack DevServer文檔。

作者提示：隨著Angular CLI版本更新，代理配置可能會有細微變化，建議查閱對應版本的官方文檔獲取最新信息。 “`

（全文約1300字，實際字數可能因Markdown渲染方式略有差異）