Proxy 解決跨域(CORS)問題

問題描述

當後端 API 與前端 Angular 應用位於不同域名或端口時,瀏覽器會基於安全考量阻擋跨域請求。

例如:

  • 後端 API:http://192.168.100.33:3333/api/users/register

  • 前端 Angular:http://localhost:4200

瀏覽器會阻擋這種跨域請求,但 Postman 等工具不受此限制。

解決方案:使用 Angular 代理(Proxy)

Angular CLI 提供了一個內建的開發伺服器代理功能,可以幫助我們在開發階段繞過跨域限制。

步驟 1:新增代理設定檔

src 資料夾下新增 proxy.conf.json 檔案:

{
  "/api": {
    "target": "http://192.168.100.33:3333",
    "secure": false,
    "changeOrigin": true
  }
}

這個設定表示:

  • 當你的應用發送請求到 /api 路徑時

  • 代理伺服器會將請求轉發到 http://192.168.100.33:3333/api

  • secure: false 表示允許不安全的連線(HTTP)

  • changeOrigin: true 確保請求標頭中的 host 被正確設定

步驟 2:修改 Angular 設定

angular.json 檔案中,找到 "serve" 區塊,並加入代理設定:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-app-name:build",
    "proxyConfig": "src/proxy.conf.json"
  },
  // ...其他設定
}

步驟 3:重啟 Angular 開發伺服器

ng serve

重要:設定檔有變更時,必須重新啟動開發伺服器才會生效!

原理說明

這個解決方案之所以有效,是因為代理伺服器與 Angular 應用運行在同一個域名和端口上,瀏覽器不會阻擋同源請求。代理伺服器再將請求轉發到實際的 API 伺服器,而伺服器之間的通訊不受瀏覽器同源政策的限制。

使用效果

設定完成後,在你的 Angular 服務中就可以直接使用相對路徑發送請求:

this.http.post('/api/users/register', userData);

Angular 的代理伺服器會自動將請求轉發到設定的目標 URL(http://192.168.100.33:3333/api/users/register)。

注意:這個解決方案僅適用於開發環境。在正式環境中,你需要在後端實現 CORS 支援或使用其他解決方案。

Last updated