大家中秋節快樂～，難得 Happy 到現在才坐在電腦前趕鐵人賽。

發生情境：當前端要串接要訪問不同網址的後端 Server 時，因為 Domain 不一樣，瀏覽器會依「同源政策(SOP)」先擋下來。

同源政策(Same-Origin Policy, SOP) vs CORS(跨來源資源共享，Cross-Origin Resource Sharing)

先來了解什麼是同源政策(Same-Origin Policy)

• 政策定義：同源政策(Same-Origin Policy)是瀏覽器內建的安全防護機制，用來限制一個來源的網頁或腳本去讀取或修改另一個來源的資源。若從從不同域名、協議或埠口的伺服器發起資源請求，它就會把你擋下來，目的是「防止惡意網站竊取使用者的機密資料（如銀行帳戶、社群訊息）」。
• 同源定義：兩個網址的 協定（Scheme）、主機名稱（Host） 以及 連接埠（Port） 三者 完全相同，即為「同源」。

(在此情境指前端本地端 url 和後端 API url 要相同)

什麼是跨來源資源共用（Cross-Origin Resource Sharing，CORS）

是瀏覽器的一種安全機制，用來允許或限制網頁向不同網域（來源）的伺服器發出請求。
而 CORS ERROR 是當一個網頁去請求**另一個不同網域（不同來源）**的伺服器資料時，被瀏覽器擋下來的安全防護警告。

(在此情境指前端本地端 url 和後端 API url 不相同而被瀏覽器擋下來)

在本地開發建立 Angular CLI Proxy 代理

開發階段最推薦的做法是在 Angular 建立代理伺服器（Proxy），讓瀏覽器以為 API 與前端同源，完全避開 CORS 機制。

1. 建立 proxy.conf.json

在projects/pc/ 底下建立 proxy.conf.json。

• target：寫上後端 API Server url。

{
  "/api": {
    "target": "http://xxx.xxx.xxx:12345", 
    "secure": false,
    "changeOrigin": true
  }
}

2. 設定 angular.json

在 angular.json 的 architect.serve.options 加入 proxyConfig：

{
  "projects": {
    "pc": {
      "architect": {
        "serve": {
          "options": {
            "proxyConfig": "proxy.conf.json"
          }
        }
      }
    }
  }
}

3. 調整環境變數 environment.local.ts

將 apiBaseUrl 改為相對路徑或空字串，發送請求給 localhost 本地代理：

export const environment = {
  production: false,
  apiBaseUrl: '' // 讓 API 請求直接發往 http://localhost:4200/api/...
};

如此一來就完成啦！

為什麼開發 Vue 沒有遇到 CORS 錯誤？

解 bug 時一直疑惑，在開發 Vue 和 React 時從來沒有遇過 CORS ERROR，真奇怪 =~=。
後來才想起來，在新建專案時習慣性到設定檔 vite.config.ts 把所有的 Server 都設定完成才開始開發，因此若是 Vue + Vite 開發，可以到 server 的 proxy 設定代理，完美避開 CORS ERROR 唷！

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx:12345', // 後端 API url
        changeOrigin: true
      }
    }
  }
})

又完美處理掉一個 bug 了，接下來讓我們繼續努力開發吧！

參考資料：

• Angular 官方文件 - 代理到後端伺服器