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