如果你通過 ionic serve 或者 ionic run 命令使用或 live reload 或者訪問過外部 API 結點，那麼你肯定遇到過 CORS 問題，譬如下面這樣：

XMLHttpRequest cannot load http://api.ionic.com/endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://localhost:8100' is therefore not allowed access.

那麼問題來了，什麼是 CORS 呢？又是什麼導致了這個問題嘞？

什麼是 CORS？

CORS=Cross origin resource sharing(跨域資源共享)

origin 就是你現在正在看的主站，你現在訪問的是
http://ionicframework.com/blog/handling-cors-issues-in-ionic，那麼 origin 就是ionicframework.com。

如果說我們向 http://cors.api.com/api 發起一個 AJAX 請求，那麼 host origin 會由被瀏覽器自動列入CORS請求的 Orgin header 指定好了，由於ionicframework.com 和 api.com

假如上面的請求出現錯誤(不被伺服器允許)，那麼我們是無法從伺服器訪問到(api.com上的)資源的。

讓我們來看一下當你通過ionic serve， ionic run，ionic run -l來執行app的時候 origin 會是什麼。

瀏覽器中的執行

當你執行 ionic serve 時發生了什麼呢？

• 啟動了一個本地 web 伺服器
• 你的瀏覽器開啟並定位到本地伺服器地址

這讓你看著你的應用載入到你電腦上一個瀏覽器裡，地址是：http://localhost:8100

你的 origin 就是localhost:8100。
任何的傳送到其他不是 localhost:8100主機上的 AJAX 請求都會把localhost:8100作為他的 origin，這就會導致必須要經過一個 CORS 預檢來看是否可以訪問（非本機的）伺服器資源。

裝置上的執行

在裝置使用 ionic run執行

當你執行 ionic run 時發生了什麼呢？

• app 所有的檔案被拷貝到裝置（或者模擬器）上。
• app 執行起來，觸發手機/模擬器上的瀏覽器訪問已經被拷貝上去的檔案，

比如： file://some/path/www/index.html。
因為你正在執行的 URI 是 file://，所以你的 origin 將不會存在，所以任何向外的請求都不再需要 CORS 請求。

在裝置使用 livereload 執行

當你執行 ionic run -l時又發生了什麼呢？

• 啟動了一個本地伺服器
• app 執行起來，觸發手機/模擬器上的一個瀏覽器通過

http://192.168.1.1:8100來執行檔案(你的 本地 ip 可能是其他的)。
你的 origin 就會是 192.168.1.1:8100。
任何一個傳送到不是192.168.1.1:8100的伺服器上的 AJAX 請求都會需要進行 CORS 預檢請求來看是否可以訪問到該伺服器上的資源。

在 ionic 中解決 CORS 問題

CORS 問題只有在我們通過 ionic serve 或者 ionic run -l 來執行或測試應用的時候才會遇到。

解決這個問題有兩個辦法：

1. 在你的 API 伺服器端允許所有的 origin，然而我們並不能控制我們訪問的所有的結點。我們需要的是一個不指定origin的請求。
2. 我們可以通過使用代理伺服器來解決這個問題。

我們來看看 Ionic CLI 是怎樣提供了一個易配置的代理伺服器的。

Ionic CLI代理伺服器

關於代理的快速定義
在計算機網路中，代理伺服器就是一個伺服器（計算機系統或者應用程式），是客戶端發起的請求從其他伺服器尋求資源的中間橋樑。

我們為了避開 CORS 問題需要做的就是有一個代理伺服器，可以接收我們的請求，向 API 結點發出一個新的請求，接收結點響應，之後反饋給我們的應用，從而避開 CORS 問題。

Ionic CLI 就有給你提供一個代理伺服器從而避開所有可能會遇到的 CORS 問題的能力。

由於代理伺服器向你的目標主機發起了一個新的請求，所以就不會再有 origin，也就不再需要 CORS 了。要注意，在瀏覽器增加了 Origin header 是很重要的。

設定代理伺服器

注意，這些設定只有通過ionic serve 和 ionic run -l 執行應用才需要
首先我們需要在 ionic.project檔案中設定我們的代理，這會告訴我們的 Ionic 本地伺服器監聽這些地址，然後傳送這些請求到我們的目標地址上。

在我們的應用中，當執行 serve 或 run -l 時候，我們需要把要訪問的結點地址替換成代理伺服器的地址。替換地址的方法有兩個：

• 使用gulp任務的 replace 模組來轉換出口地址會簡單一點。
• 建議的方法是設定一個 Angular Constant 來定位到我們試圖代理的 API。

方法1：通過Angular Constant

這就是我們下面要採用的方法。我們會同時設定一個 Angular Service 來從 API結點 獲取資料。

設定代理路徑

比如說我們想要訪問 ·http://cors.api.com/api·，但並不允許我們來自 localhost:8100的 origin。
代理的設定包括兩件事兒：

• 在你本地 Ionic 伺服器需要訪問的 path
• 最終需要訪問API的 proxyUrl

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
  }

通過ionic serve啟動你的伺服器。
像我們上面指定的這樣，當你訪問 Ionic 伺服器地址 http://localhost:8100/api的時候，它會以你的名義訪問 http://cors.api.com/api。這樣，就不需要 CORS 了。

設定 Angular Constant

把你的 API結點設定成 Angular Constants是非常簡單的一件事兒。
下面我們就來把API結點指定成為我們的代理 URL。
之後(釋出時候)我們會把正式的地址作為 constant。

angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.constant('ApiEndpoint', {
  url: 'http://localhost:8100/api'
  })
// .constant('ApiEndpoint', {
//  url: 'http://cors.api.com/api'
// })

設定好之後你就能像下面這樣在應用中引入ApiEndpoint依賴，隨意呼叫這個constant了。

設定Angular Service

angular.module('starter.services', [])
//NOTE: We are including the constant `ApiEndpoint` to be used 
.factory('Api', function($http, ApiEndpoint) {
  console.log('ApiEndpoint', ApiEndpoint)

  var getApiData = function() {
    return $http.get(ApiEndpoint.url + '/tasks')
      .then(function(data) {
        console.log('Got some data: ', data);
        return data;
      });
  };

  return {
    getApiData: getApiData
  };
})

方法2：通過 Gulp 自動轉換地址

這個過程中，我們需要修改gulpfile.js來新增兩個任務：新增代理和移除代理。
首先安裝replace模組 - npm install –save replace

// npm install --save replace
var replace = require('replace');
var replaceFiles = ['./www/js/app.js'];

gulp.task('add-proxy', function() {
  return replace({
    regex: "http://cors.api.com/api",
    replacement: "http://localhost:8100/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });})

gulp.task('remove-proxy', function() {
  return replace({
    regex: "http://localhost:8100/api",
    replacement: "http://cors.api.com/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });
})

結語

本教程向你展示了一個解決通過ionic serve或ionic run -l命令執行應用時候遇到的 CORS 問題的方法。
我們知道在ionic serve和ionic run -l之間轉換 API 結點地址的時候可能會是個麻煩，比較建議的方法是啟動一個 gulp 程序。
解決 CORS 問題最簡單的方法是讓 API 提供者允許所有的 hosts，然後這事兒有點兒不太現實。
使用 Angular constant 和 replace 模組可以給我們一個避開 CORS 的折中的辦法。