ionic1跨域問題

在使用ionic是遇到跨域問題

我本身嘗試簡單的單間一個能返回數據的後臺服務器，ionic的www目錄我使用一個ionic的livereload 來當作一個簡易的web服務器，在使用ionic serve 或者ionic build的時候會發生跨域的問題，參考@donghongfei的分享解決了這個問題，記錄一下，再次遇到就不怕。

解決過程：我使用的是他介紹代理服務器方法

1. 將你的ionic.project 改形成這樣（如今ionic.project更名爲ionic.config.json）,path至關於proxyUrl的一個簡稱，也就是在頁面中使用path的時候回去調用proxyUrl

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

1. 而後把你的API節點設置成angular constant，吧API節點指定爲咱們的代理url，這樣就能夠在須要的頁面引入ApiEndpoint依賴，來使用這個模塊

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

3.設置angular的service

angular.module('starter.services', [])

    //NOTE: We are including the constant `ApiEndpoint` to be used here.
    .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
      };
    })

4.經過gulp自動轉化地址，修改gulpfile添加兩個任務，同時須要先下載replace插件
npm install replace --save

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,
  });
})

5.上面的第二步是他的方法，放在個人項目中不方便，我就單獨寫了一個proxy文件，而後在須要的模塊中引入，調用便可,可是url我這裏須要使用服務器地址，而不是livereload地址，這個須要注意
最後補充：）個人www目錄結構已經發布到github，地址