使用代理解决Ionic下cros跨域问题

当我们在使用ionic serve 或者ionic run命令的时候，我们通常会出现类似下面的错误：

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.

这就是cros跨域问题，对于跨域问题，我们通常的解决方案是修改服务端或者浏览器，但是有些时候会存在不便。为此ionic提供了一个代理的选项，以帮助我们解决这一问题。

在ionic.config.json文件，旧版本为ionic.project文件里，增加下面的配置。

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

• path：你在本地Ionic服务器上访问它们的路径
• proxyUrl：你最终希望通过API调用达到的proxyUrl
  通常，我们会在代码定一个全局的常量，来设定api接口地址，我们可以配合gulp脚本来自动进行添加和替换操作

var replace = require('replace');
//注意下面的文件地址，它是包含你endpoint或baseurl的文件
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,
  });
})