ionic——使用本地代理服务器解决http跨域问题

在ionic开发中我们常常会遇到http请求相关问题。在设备中我们常用的方法是使用白名单插件cordova-plugin-whitelist。通过在config.xml中配置<access origin="*"/>参数来对http请求进行本地化而解决跨域问题。但是我们在实际开发中我们经常使用ionic serve或ionic run ios -l -c -s来进行调试工作。使用白名单插件无法正常运行。这里就要使用代理服务器了。

什么是代理服务器

代理服务器就是一个将http请求进行中转的服务器。以代理服务器的名义去访问远程服务器。而ionic CLI就提供了一个本地的代理服务器来解决$http跨域的问题

如何使用代理服务器

在项目根目录下找到文件ionic.config.json添加proxies字段。如下：

{
  "name": "test",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://api.yourdomain.com"
    }
  ]
}

使代理服务器监控path字段的http请求。将相应请求通过代理服务器中转发送到proxyUrl字段的地址上

当你访问/api的时候。实际上是发送到http://api.yourdomain.com。如请求/api/data.json。实际上请求的是远程服务器http://api.yourdomain.com/data.json的数据。在项目目录中api文件夹其实不存在

同时代理服务器能设置多个以满足不同的需求

定义常量方便切换开发环境与发布环境

代理服务器的使用仅在ionic CLI环境在才能工作。在真机下实际上是会真的访问/api目录导致404错误的。为了解决问题需要设置全局常量以方便不同环境下的切换。

.constant('ApiServer', '/api')
//.constant('ApiServer', 'http://api.yourdomain.com')

使用如下：

.controller('test',function($scope, ApiServer){
	var url = ApiServer + "/data.json"
	$http.get(url)
	  .success(function(data,status,headers,config) {
	    console.log(data);
	  }).error(function(data,status,headers,config){
	    console.log(status);
	  });
})