在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
字段。如下: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);
});
})