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

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

什么是代理服务器

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

如何使用代理服务器

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

1
2
3
4
5
6
7
8
9
10
{
"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错误的。为了解决问题需要设置全局常量以方便不同环境下的切换。

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

使用如下:

1
2
3
4
5
6
7
8
9
.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);
});
})

文章目录
  1. 1. 什么是代理服务器
  2. 2. 如何使用代理服务器
  3. 3. 定义常量方便切换开发环境与发布环境