解決 ng2 的 Cross Domain 問題

當我們在開發環境使用 Angular2 要去後端 Web API 取資料時，出現以下錯誤
No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是因為後端的 Web API 沒有支援 Cross Origin Resource Sharing (CORS)
這時，我們可以在Client端設定，透過 Proxy 轉發網址

Step 1. 於根目錄(與package.json同層) 建立 proxy.config.json 檔案，內容如下
(其中 KyleAPI 是Web API 的名稱，target 指的是 Visual Studio 執行後產生 IIS Express 的站台IP)
{
  "/KyleAPI": {
    "target": "http://localhost:47496",
    "secure": false
  }
}

Step 2. 修改package.json檔案，將npm 指令中的 start 加上proxy-config，並指向proxy.config.json 檔案
"start": "ng serve",
↓↓↓
"start": "ng serve --proxy-config proxy.config.json",

Step 3. 重新啟動 npm start，並在程式中的 url 只要改成下面這段即可
    //let url = 'http://localhost:47496/KyleAPI/api/values/';
    let url = '/KyleAPI/api/values/';
這時我們的 proxy 設定會自動將 /KyleAPI/api/values/ 網址轉為 http://localhost:47496/KyleAPI/api/values/


當你將開發的 Angular2 與 Web API 部署到 IIS 上之後，請把他們放在一起(詳見這一篇)，這時候就不需要這個設定了