问题描述
如下图所示,当我们的app请求后台服务时,就会出现浏览器跨域问题
翻译:已被CORS策略阻止：在请求的资源上不存在“Access-Control-Allow-Origin”头。 因此，不允许原始'http：// localhost：8100'访问
什么是跨域
- 首先要明确,跨域是浏览器的安全策略,当我们请求地址和app启动地址不一致时,就会触发浏览器的安全限制
什么时候会出现跨域问题
- 在浏览器开发app的时候,假如app运行的地址是
http://localhost:8100/,当请求的ip不是localhost或端口不是8100时,就会出现跨域问题 - app在真机上运行不存在跨域问题
最新版的ionic ios app使用了wkwebview在真机上是存在跨域请求的.所以解决跨域需要使用后台手段(以下方法3和方法4)或者使用native http插件
解决跨域问题
方法一:安装chrome跨域插件
- 这种方法最简单
- 去谷歌应用商店安装chrome Allow-Control-Allow-Origin插件
- 不能上谷歌商店就去我的csdn下载,下载后浏览器打开扩展程序界面,把下载的.crx文件拖进去就了
-
如下图2,安装后并开启,现在发出请求就不会出现跨域异常啦.
图 1,安装过程
图 2,启用跨域插件
方法二:设置代理
执行ionic serveapp运行在http://localhost:8100/, 所以只有请求地址是localhost并且端口是8100时才不会有跨域问题
具体设置代码如下图,其中Constants.ts和LoginService.ts是我的业务代码,重点是配置ionic.config.json
- 这里贴出
ionic.config.json代码,一般只有一个后台服务,我这里有两个
{
"name": "ionic2_tabs",
"app_id": "",
"typescript": true,
"v2": true,
"proxies": [
{
"path": "/app",
"proxyUrl": "http://88.128.18.144:7777/app"
},
{
"path": "/kit_file_server",
"proxyUrl": "http://88.128.18.144:3333/kit_file_server"
}
]
}
注意
-
当执行
ionic run android --livereload进行调试时,默认启动的端口是8000不是8100,ip也不是localhost,如我的是88.128.18.144.(使用这种调试方式,手机网络和电脑网络必须连接同一个网络) -
这时候app是在手机浏览器运行,方法一肯定是不行了.
-
具体配置只是把
http://localhost:8100/, 改为http://88.128.18.144:8000,修改后的Constants.ts如下图
-
如上描述,执行
ionic serve和ionic run android --livereload默认启动的ip和端口不一样,导致配置有点不一样,所以为了方便,使用ionic serve --port 8000 --address 88.128.18.144指定端口和ip启动
方法三:后台服务端设置
-
如下图是java代码,设置了login方法的响应头
response.setHeader("Access-Control-Allow-Origin", "*"); -
这种方式的原理就是:服务端告诉浏览器,我的服务接受任何请求来源,请不要拦截
-
后台使用拦截器统一处理,这种方式前端最省心了
MultivaluedMap<String, Object> headers = responseContext.getHeaders();
headers.add("Access-Control-Allow-Origin", "*");
//headers.add("Access-Control-Allow-Origin", "http://abcd.org"); //allows CORS requests only coming from abcd.org
headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
headers.add("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia, Authorization,token");
方法四:使用nginx
最后
相关文章:跨域资源共享 CORS 详解
网友评论
Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load http://219.132.xxx.37:xxxx/api/authcheck. Origin null is not allowed by Access-Control-Allow-Origin.
ionic -v 是3.16.0， node -v是v6.11.2。
代码：
checkAuthentication() {
return new Promise((resolve, reject) => {
//Load token if exists
this.storage.get('token').then((value) => {
this.token = value;
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Authorization', 'aocsd ' + this.token);
this.http.get(this.zfyweburl+'/api/authcheck',{ headers: headers })
.subscribe(res => {
let data = res.json();
this.storage.set('res', data);
this.storage.set('user', data.user);
resolve(data);
}, (err) => {
reject(err);
});
});
});
}
真机用的是file://协议啊？？
我用的是 ionic cordova run ios，结果iphone真机安装完测试报错，iPhone模拟器也是一样的问题，用Safari打开调试页面显示Origin null is not allowed by Access-Control-Allow-Origin错误。很郁闷。
angular 4.4.3版本。
"dependencies": {
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
}
ionic cordova run android --livereload就用跨域问题
ionic cordova run android 肯定没有跨域问题
"proxies": [
{
"path": "/v1/public/yql",
"proxyUrl": "https://query.yahooapis.com/v1/public/yql"
}
]
这是怎么回事
var serviceIP = 'http://10.10.10.233';
var utilConf = {
authUrl: serviceIP+':8806/',
paramUrl: serviceIP+':8801/',
campUrl: serviceIP+':18806/',
devUrl: serviceIP+':23801/',
resumeUrl: serviceIP+':18805/',
hrUrl: serviceIP+':8812/',
};
方便获取不同的IP或端口