Angular 應用解決跨域訪問的問題

在先後臺分離的應用中，Angular 與 Java 是一對好搭檔。可是若是是分開部署應用，則勢必會遇到跨域訪問的問題。

什麼是跨域

啓動應用以後，有些瀏覽器會提示以下告警信息：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

這個是典型的跨域問題。瀏覽器爲了安全考慮，不一樣的域之間是不可以互相訪問的的。

好比，Angular 應用部署在本地的4200端口，而 Java 服務部署在8080端口，他們雖然是同臺機子，但仍然是不一樣的域。Angular 應用視圖經過HttpClient 去訪問 Java 的 http://localhost:8080/hello 接口是不容許的。

如何解決跨域問題

在知道了什麼是跨域以後，解決方案就有多種。

1. 避免跨域

既然，分開部署致使了跨域，那麼最簡單的方式莫過於避免分開部署，即Angular 與 Java 同時部署到同個 Web 服務器中。

這種方式部署在傳統的 Java Web 中很是常見。好比，JSP 應用。

但帶來的問題是，水平擴展和性能調優將變得困難，不適合大型互聯網應用。

2. 安裝支持跨域請求的插件

其實，不少瀏覽器都提供了容許跨域訪問的插件，只需啓用這種插件，就能實如今開發環境跨域請求第三方 API 了。

下圖展現的是在 Firefox 瀏覽器中可以實現的跨域訪問的插件。

這種方式是最簡單，但使用的場景比較受限，通常用於開發環境。

3. 設置反向代理

這種方式是業界最爲經常使用的方式，原理是設置反向代理服務器，讓 Angular 應用都訪問本身的服務器中的API，而這類API都會被反向代理服務器轉發到 Java 服務API中，而這個過程對於 Angular 應用是無感知的。

業界常常是採用 NGINX 服務來承擔反向代理的職責。而在 Angular 中，使用反向代理將變得更加簡單。在 Angualr 應用的根目錄下，添加配置文件proxy.config.json，並填寫以下格式內容：

{
    "/lite": {
      "target": "http://localhost:8080",
      "secure": "false"
    }
}

使用 Angular CLI 啓動應用時，只須要執行以下命令便可，很是方法：

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

這樣，當 Angular 要訪問http://localhost:4200/lite 時，會被轉發到 Java 的 http://localhost:8080/lite 接口。

參考引用

• 原文同步至https://waylau.com/angular-proxy/
• Angular CLI 經常使用命令：https://my.oschina.net/waylau/blog/2874325
• Spring 5 開發大全：https://github.com/waylau/spring-5-book
• 跟老衛學Angular：https://github.com/waylau/angular-tutorial
• NGINX 教程：https://github.com/waylau/nginx-tutorial