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 的 介面。

參考引用

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