Angular本地代理解決跨域問題
阿新 • • 發佈：2019-02-04
今天在寫完了前端的登入表單元件後，本地測試時由於前端執行在http:localhost:4200,而後端部署在其他主機上，訪問後端介面產生了瀏覽器跨域問題，百度一番後找到了解決方案：
1.搭建本地代理到目標伺服器；
2.讓後端在response新增Access-Control-Allow-Origin:*;這個http Header 由於第二種方法可能會導致非法跨域攻擊（CSRF），因此我採用了搭建本地代理的方法。
好在Angular-cli開發環境提供給了我們一個本地代理：
通過新建並配置Angular專案根資料夾下的proxy.conf.json檔案：
最後要啟動代理，需要將Angular專案根資料夾下的package.json檔案中的"script"欄位下的"start"欄位改為"ng serve --proxy-config proxy.conf.json"，並使用npm start命令在本地啟動angular應用；或者直接執行ng serve --proxy-config proxy.conf.json命令來啟動應用。這樣本地代理就可以為本地angular應用服務了，大功告成！
1.搭建本地代理到目標伺服器；
2.讓後端在response新增Access-Control-Allow-Origin:*;這個http Header 由於第二種方法可能會導致非法跨域攻擊（CSRF），因此我採用了搭建本地代理的方法。
好在Angular-cli開發環境提供給了我們一個本地代理：
通過新建並配置Angular專案根資料夾下的proxy.conf.json檔案：
檔案中可包含多條配置規則，每一條配置都是以上格式，其中"/api"欄位名是需要被代理的url規則表示式，可根據需要自行替換（這裡我用**來代理所有的http請求），"target"欄位內容"http://localhost:3000"是該url規則表示式下代理到的主機名（可以是域名或者ip）。{ "/api":{ "target": "http://localhost:3000", "secure": false } }
最後要啟動代理，需要將Angular專案根資料夾下的package.json檔案中的"script"欄位下的"start"欄位改為"ng serve --proxy-config proxy.conf.json"，並使用npm start命令在本地啟動angular應用；或者直接執行ng serve --proxy-config proxy.conf.json命令來啟動應用。這樣本地代理就可以為本地angular應用服務了，大功告成！