ionic 优雅的解决开发跨域及后台环境切换

之前主要接触的是Android和J2EE之类的开发,不是一个正统前端狗,所以很多前端的特性和骚操作都没有深入了解过。去年部门开始要我带头入坑ionic2,于是我从一个连JavaScript的Hello World都没写过的人，转型为一个Angualr 2+ionic 2的伪前端狗。由于没人指导，期间踩坑无数，的感觉头发日渐稀少，炎热的夏天，头顶总是有丝丝凉意。所以现在闲了下来（更应该说是顿悟后打鸡血般的兴奋感以及女朋友的支持……），决定把一些遇到的坑写出来。

-1

我是前端入门小白，所以可能这条路是错的，不喜勿喷。

0x00 开始

后面都围绕着Gank.io这个网站提供的API测试。

ionic其实就是一个基于Angular前端项目。所以在前端开发的过程中，必须要解决CORS跨域问题。解决方法主要有两个：

Chrome浏览器中安装Access-Control-Allow-OriginChrome拓展
修改后台Service,允许跨域访问(非常极其以及十分的不安全，但我 TMD 前面两个项目就是这样做的，而且因为项目问题，现在不能随便更改项目配置，只能眼睁睁开着项目裸奔着，这或许是我这辈子最大的败笔吧)
使用ionic CLI代理服务器

为何不用第一种方法？

装完Chrome拓展后，开启拓展后，默认所有网站都允许跨域，这就很不安全了。

这方法还存在一个坑，就是开启拓展后，上Gayhub Star 一些屌炸天的项目的时候，居然会报错，一两次没注意，以为是梯子不稳了，一直错误，才感觉好像并没有那么简单。经过一番推理，发现就是因为开启了跨域拓展，Gayhub做了保护，拒绝了请求，导致报错

当然，一定要用这方法也不是不行，就要花点心思配置了，一个项目还好，多个项目就麻烦了，而且这拓展有时候还会莫名的失效，需要开关拓展刷新页面才恢复正常，这就很不优雅了。

为何不用第二种方法？

f**k

500

滚

为何用第三种方法？

因为这合理切符合我们对优雅的追求。

0x01 设置`ionic CLI`代理服务器

在ionic 2及ionic 3项目根目录中，都有ionic.config.json这个文件，我们就是通过这个配置文件实现的。

实现代理

现在我们要调用API接口http://www.gank.io/api/day/history，获取所有历史记录。我们来拆解下这个URL:
通过API说明页：

这个网站的主URL是http://gank.io
所有接口都是/api这个路由下的

专业一点的说法就是，这个项目的endpoint是http://www.gank.io/api,path是/api。
说点人话就是，如果我是http://www.gank.io网页中包含的一个ajax请求，当我请求/api/history这个url的时候，浏览器最终会把你的请求地址补全，补全为http://www.gank.io/api/day/history，然后你就可以得到数据了。你要实现这自动补全（瞎称呼的，为了方便理解）URL的功能，必须要以/api开头，当浏览器发现是/api开头的时候，就会自动补全，如果不是，就直接请求你输入的URL了。可以把这理解为规定，没有为什么。
结论：

proxyUrl=>http://gank.io/api
path=>/api

修改ionic.config.json文件:

{    "name": "gank-me",    "app_id": "",    "type": "ionic-angular",    "integrations": {},    "proxies": [
        {            "path": "/api",            "proxyUrl": "http://gank.io/api"
        }
    ]
}

测试

import { Http } from '@angular/http';//***this.http.get("/api/day/history")
      .toPromise()
      .then(res=>{debugger});

结果：
就是成功的返回数据嘛

0x02优雅的切换服务器环境

一个稍微正经点的商业项目，总有至少3个环境情况，开发、测试、生产（正式）环境,即Dev,UAT,Prod。在不同环境下，我们有不一样的配置，如数据库的文件名不同，某些服务用到的key不同………这就需要在各个环境之间进行切换。切换的方式有两种：

在一个*.ts文件中，定义好URL,Key等信息，测试、打包时，手动切换
通过Webpack脚本，通过参数的方式切换

为何放弃方法一？

放弃主要是误操作概率太高，且难以接入Jenkins自动构建打包。如果没有一个人专门负责打包，且这个人还有自己的一个打包TODO list，很容易想象这样一个场景，经过漫长的打包过程后，安装到手机时，才发现环境错了，这就很僵硬了；当然还有比这更糟糕的，就是在生产环境一顿猛如虎的操作后才发现，丫哟，环境错了！！

方法二？

如果是通过参数传入的方式更改环境，或许会简单准确很多吧，至少在Android开发时，通过多渠道打包的方式打包，没有出现过环境搞错的问题。所以这方法二就显得很正确，很优雅了。那么如何实现呢？

开始

预配置环境参数

创建三个环境对应的ts文件：

environment.dev.ts
environment.prod.ts
environment.uat.ts

结构：

.
├── src│   ├── environments│   │   ├── environment.dev.ts│   │   ├── environment.prod.ts│   │   └── environment.uat.ts

以environment.prod.ts为例，内容如下:

export const ENV = {    "mode": "Prod",    "database": "data.db",    "cordova": {        "id": "io.ionic.starter",        "version": "0.0.1",        "ios": {            "CodePushServerUrl": "prod",            "CodePushDeploymentKey": "1234567890"
        },        "android": {            "CodePushServerUrl": "prod",            "CodePushDeploymentKey": "0987654321"
        }
    }
}

然后在项目根目录中创建文件夹config，里面创建文件webpack.config.js

.
├── config│   └── webpack.config.js

内容如下:

var chalk = require("chalk");var fs = require('fs');var path = require('path');var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');var env = process.env.NODE_ENV || 'dev';var IONIC_ENV = process.env.IONIC_ENVconsole.log('NODE_ENV:' + env);console.log('IONIC_ENV:' + IONIC_ENV);if (env === 'dev') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('dev'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('dev'))
    };
  };
}if (env === 'uat') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('uat'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('uat'))
    };
  };
}if (env === 'prod') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('prod'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('prod'))
    };
  };
}function environmentPath(env) {  var filePath = 'src/environments/environment.' + env + '.ts';  console.log("use env file:" + filePath);  if (!fs.existsSync(filePath)) {    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {    return filePath;
  }
}module.exports = function () {  return useDefaultConfig;
};

修改项目的package.json文件，添加：

"config": {    "ionic_webpack": "./config/webpack.config.js"}

修改tsconfig.json

{  "compilerOptions": {    "baseUrl": "./src",    "paths": {      "@env/environment": [        "environments/environment.prod"
      ]
    }
  }
}

实现动态切换环境`URL`

前面我们说了设置ionic CLI代理，这时候当然也要加入，实现一个命令，切换环境及参数，才是我们的目标。下面我们开始实现.

项目根目录创建文件enviroment.json：

{    "devUrl": "http://localhost:8080/api",    "devPath": "/api",    "uatUrl": "http://r.example.com/api",    "uatPath": "/api",    "prodUrl": "http://gank.io/api",    "prodPath": "/api"}

dev和uat我瞎写的，不要在意，只是为了实现效果而已啦。

然后，我们修改刚刚的webpack.config.js文件，添加一个方法setProxy()及调用者方法的一句代码，完整的webpack.config.js:

var chalk = require("chalk");var fs = require('fs');var path = require('path');var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');var env = process.env.NODE_ENV || 'dev';var IONIC_ENV = process.env.IONIC_ENVconsole.log('NODE_ENV:' + env);console.log('IONIC_ENV:' + IONIC_ENV);if (env === 'dev') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('dev'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('dev'))
    };
  };
}if (env === 'uat') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('uat'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('uat'))
    };
  };
}if (env === 'prod') {  if (IONIC_ENV == 'dev') {
    useDefaultConfig.dev.resolve.alias = {      "@env/environment": path.resolve(environmentPath('prod'))
    };
  };  if (IONIC_ENV == 'prod') {
    useDefaultConfig.prod.resolve.alias = {      "@env/environment": path.resolve(environmentPath('prod'))
    };
  };
}function environmentPath(env) {  var filePath = 'src/environments/environment.' + env + '.ts';  console.log("use env file:" + filePath);
  setProxy(env);  if (!fs.existsSync(filePath)) {    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {    return filePath;
  }
}function setProxy(env) {  console.info("Set proxy");  var configJson = require("../enviroment.json");
  fs = require('fs');  var path = require('path');  var filePath = path.resolve(__dirname, '../ionic.config.json');  var m = JSON.parse(fs.readFileSync(filePath).toString());  var serverUrl;  var urlPath;  switch (env) {    case "prod":
      serverUrl = configJson.prodUrl;
      urlPath = configJson.prodPath;      break;    case "dev":
      serverUrl = configJson.devUrl;
      serverUrl = configJson.devPath;      break;    default:
      serverUrl = configJson.devUrl;
      serverPath = configJson.devPath;      break;
  }
  m.proxies[0].proxyUrl = serverUrl;
  m.proxies[0].path = urlPath;
  fs.writeFileSync(filePath, JSON.stringify(m));
}module.exports = function () {  return useDefaultConfig;
};

添加启动`Script`

现在其实已经完成了配置文件的编写，下面就是解决如何使用的问题，我这里举个不完整例子

修改package.json添加两个环境,Dev和Prod:

{  "scripts": {    "clean": "ionic-app-scripts clean",    "build": "ionic-app-scripts build",    "lint": "ionic-app-scripts lint",    "ionic:build": "ionic-app-scripts build",    "ionic:serve": "ionic-app-scripts serve",    "serve:uat": "NODE_ENV=uat ionic serve",    "serve:prod": "NODE_ENV=prod ionic serve"
  }
}

2. [例]在`home.ts`中调用配置的参数
    
    
    ```typescript    
    import { Http } from '@angular/http';    import { ENV } from '@env/environment'
    
    @IonicPage()    @Component({
      selector: 'page-home',
      templateUrl: 'home.html',
    })
    export class HomePage {
    
      constructor(private http: Http) {
      }
    
      ionViewDidLoad() {
        console.log(ENV.mode);  //打印环境
        debugger;               //加个断点
      }
    
    }

切换环境并运行
假设需要切换到prod环境，那么终端执行$ npm run serve:prod，如果成功，会自动打开网页
断点

我们看到，参数都在ENV这个对象中。
ionic CLI代理就不测了，反正都可以用就对了。
如果要切换uat那就$ npm run serve:uat呗，这些命令都是定义在package.json中scripts里面，大家可以依葫芦画瓢整起来
完成

项目

Gank-me
参考allnew_package分支

引用

彻底解决Ionic项目中的跨域问题
 ionic3 中使用 environments

作者：凌音同学
链接：https://www.jianshu.com/p/3cd77cd8d2d5