前端的跨域問題是由于瀏覽器的同源策略引起，協(xié)議，域名，端口的不同均會導(dǎo)致跨域問題，無法訪問到我們期望的服務(wù)器。

采用Ionic 開發(fā) Web App 和Hybrid App， 同樣會遇到跨域問題，解決的方式也不盡相同。

Web App

Web App的本質(zhì)還是一個web 應(yīng)用

• 代理服務(wù)器：通過代理服務(wù)器，把本地的請求通過代理服務(wù)器轉(zhuǎn)發(fā)給目標(biāo)服務(wù)器 webpack devServer

• 本地采用非安全模式瀏覽器: 非安全模式瀏覽器將不在采用同源策略
  Mac: open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/UserName/MyChromeDevUserData/
  Window:

  922445-20180814152040697-1083243052.png
  
  關(guān)閉所有的chrome瀏覽器，打開chrome 瀏覽器的屬性窗口，在路徑上添加" --args --disable-web-security --user-data-dir"， 如上圖

• Cors: 設(shè)置Cors 的request header(后端) Access-Control-Allow-Origin 為 *（任何源都可以訪問, 相對不安全）

如果應(yīng)用要求Session作為驗證token, 則第三種方式無效。原因是設(shè)置
Access-Control-Allow-Origin: * 后，請求時不會自動帶上Cookie, 也就不會帶上Session.

• JSONP: 利用JS可以加載非同源的外部資源的形式發(fā)送網(wǎng)絡(luò)請求，以回調(diào)的方式讀取資源。

Hybrid App

Web 資源的存在位置在本地還是在云端決定了跨域問題的處理方式

Web 資源在云端

Ionic 的開發(fā)模式允許開發(fā)者將App 作為一個原生容器， 啟動App時會加載云端的Web 資源，即用App 打開了一個webview。這種情況，開發(fā)同樣是web app 的開發(fā)形式，跨域問題請參考以上.

Web 資源在本地

Ionic 的混合開發(fā)模式允許用戶將web 資源存在本地，形式等同于原生App,加載資源的時候也是從本地，提升用戶體驗。
資源存放在本地時，如果這時發(fā)起網(wǎng)絡(luò)請求，是從本機發(fā)起本機發(fā)起的(localhost)

• 后端不需要通過Session驗證信息，可以采用設(shè)置Cors 的Access-Control-Allow-Origin: * 來訪問。
• 后端需要通過Seesion 驗證信息，則需要通過原生的方式來做網(wǎng)絡(luò)請求。
  1、Cordova 插件：cordova-plugin-advanced-http

const options = {
  method: 'post',
  data: { id: 12, message: 'test' },
  headers: { Authorization: 'OAuth2: token' }
};

cordova.plugin.http.sendRequest('https://google.com/', options, function(response) {
  // prints 200
  console.log(response.status);
}, function(response) {
  // prints 403
  console.log(response.status);

  //prints Permission denied
  console.log(response.error);
});

2、原生支持：通過JS bridge, 原生與JS通信。JS發(fā)消息給原生，原生發(fā)出網(wǎng)絡(luò)請求，請求回復(fù)后給JS消息，消息體中攜帶網(wǎng)絡(luò)返回的內(nèi)容。

跨域的核心問題即瀏覽器的同源策略，規(guī)避或者繞過同源策略即可解決跨域問題。