在使用ionic是遇到跨域问题
我自己尝试简单的单间一个能返回数据的后台服务器,ionic的www目录我使用一个ionic的livereload 来当做一个简易的web服务器,在使用ionic serve 或者ionic build的时候会发生跨域的问题,参考@donghongfei的分享解决了这个问题,记录一下,再次遇到就不怕。
解决过程:我使用的是他介绍代理服务器方法
- 将你的ionic.project 改造成这样(现在ionic.project改名为ionic.config.json),path相当于proxyUrl的一个简称,也就是在页面中使用path的时候回去调用proxyUrl
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",//
"proxyUrl": "http://cors.api.com/api"
}
]
}
- 然后把你的API节点设置成angular constant,吧API节点指定为我们的代理url,这样就可以在需要的页面引入ApiEndpoint依赖,来使用这个模块
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
url: 'http://localhost:8100/api'
})
3.设置angular的service
angular.module('starter.services', [])
//NOTE: We are including the constant `ApiEndpoint` to be used here.
.factory('Api', function($http, ApiEndpoint) {
console.log('ApiEndpoint', ApiEndpoint)
var getApiData = function() {
return $http.get(ApiEndpoint.url + '/tasks')
.then(function(data) {
console.log('Got some data: ', data);
return data;
});
};
return {
getApiData: getApiData
};
})
4.通过gulp自动转化地址,修改gulpfile添加两个任务,同时需要先下载replace插件
npm install replace --save
var replace = require('replace');
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,
});
})
5.上面的第二步是他的方法,放在我的项目中不方便,我就单独写了一个proxy文件,然后在需要的模块中引入,调用即可,但是url我这里需要使用服务器地址,而不是livereload地址,这个需要注意
最后补充:)我的www目录结构已经发布到github,地址