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，地址

转载于:https://www.cnblogs.com/ytg-share/p/6049574.html