慕课网有一门免费课程，详细介绍了ajax跨域问题，讲的非常好，各位可以去看看
https://www.imooc.com/learn/947
问题描述
如下图所示,当我们的app请求后台服务时,就会出现浏览器跨域问题
什么是跨域
- 首先要明确,跨域是浏览器的安全策略,当我们请求地址和app启动地址不一致时,就会触发浏览器的安全限制
什么时候会出现跨域问题
- 在浏览器开发app的时候,假如app运行的地址是
http://localhost:8100/,当请求的ip不是localhost或端口不是8100时,就会出现跨域问题 - app在真机上运行不存在跨域问题
最新版的ionic ios app使用了wkwebview在真机上是存在跨域请求的.所以解决跨域需要使用后台手段(以下方法3和方法4)或者使用native http插件
解决跨域问题
方法一:安装chrome跨域插件
- 这种方法最简单，但是只适用于开发调试阶段
- 去谷歌应用商店安装chrome Allow-Control-Allow-Origin插件
- 不能上谷歌商店可以使用国产浏览器，如QQ浏览器应用商店不需要翻墙
- 如下图2,安装后并开启,现在发出请求就不会出现跨域异常啦
图 1,安装过程
图 2,启用跨域插件
方法二:设置代理
此方法也很简单，只适用于web端，如部署项目到服务器端，android app默认不存在跨域，所以不需要此配置，ios根据使用的不同webview，可能存在会跨域
执行ionic serveapp默认运行在http://localhost:8100/下, 所以只有请求地址是localhost并且端口是8100时才不会有跨域问题
- 修改api地址为localhost:8100，因为app启动的地址是localhost:8100
- 在
ionic.config.json文件中配置代理
{
"name": "ionic2_tabs",
"integrations": {
"cordova": {}
},
"type": "ionic-angular",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://88.128.19.209:9898/api/"
}
]
}
注意
当执行
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", "*");-
这种方式的原理就是:服务端告诉浏览器,我的服务接受任何请求来源,请不要拦截
-
java后台使用拦截器统一处理,这种方式前端最省心了
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Max-Age", "360000"); // 缓存预检请求，即一个小时内不在发送OPTIONS请求
filterChain.doFilter(servletRequest, servletResponse);
- java spring boot方式
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.addAllowedMethod("*");
config.addAllowedHeader("*");
config.setMaxAge(3600L); // 缓存预检请求，即一个小时内不在发送OPTIONS请求
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
方法四:使用nginx-推荐
-
nginx配置详情点这里，下面是使用nginx解决跨域方式2核心配置
location /api {
proxy_pass http://88.128.19.209:8081/api/;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
if ($request_method = OPTIONS ) {
return 200;
}
}
最后
相关文章:跨域资源共享 CORS 详解
