慕課網(wǎng)有一門免費課程，詳細介紹了ajax跨域問題坟比，講的非常好，各位可以去看看
https://www.imooc.com/learn/947
問題描述
如下圖所示,當我們的app請求后臺服務(wù)時,就會出現(xiàn)瀏覽器跨域問題
什么是跨域
- 首先要明確,跨域是瀏覽器的安全策略,當我們請求地址和app啟動地址不一致時,就會觸發(fā)瀏覽器的安全限制
什么時候會出現(xiàn)跨域問題
- 在瀏覽器開發(fā)app的時候,假如app運行的地址是
http://localhost:8100/,當請求的ip不是localhost或端口不是8100時,就會出現(xiàn)跨域問題 - app在真機上運行不存在跨域問題
最新版的ionic ios app使用了wkwebview在真機上是存在跨域請求的.所以解決跨域需要使用后臺手段(以下方法3和方法4)或者使用native http插件
解決跨域問題
方法一:安裝chrome跨域插件
- 這種方法最簡單，但是只適用于開發(fā)調(diào)試階段
- 去谷歌應(yīng)用商店安裝chrome Allow-Control-Allow-Origin插件
- 不能上谷歌商店可以使用國產(chǎn)瀏覽器皮仁，如QQ瀏覽器應(yīng)用商店不需要翻墻
- 如下圖2,安裝后并開啟,現(xiàn)在發(fā)出請求就不會出現(xiàn)跨域異常啦
圖 1,安裝過程
圖 2,啟用跨域插件
方法二:設(shè)置代理
此方法也很簡單籍琳，只適用于web端，如部署項目到服務(wù)器端贷祈，android app默認不存在跨域趋急，所以不需要此配置，ios根據(jù)使用的不同webview势誊，可能存在會跨域
執(zhí)行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/"
}
]
}
注意
當執(zhí)行
ionic run android --livereload進行調(diào)試時,默認啟動的端口是8000不是8100,ip也不是localhost,如我的是88.128.18.144.(使用這種調(diào)試方式,手機網(wǎng)絡(luò)和電腦網(wǎng)絡(luò)必須連接同一個網(wǎng)絡(luò))這時候app是在手機瀏覽器運行,方法一肯定是不行了.
-
具體配置只是把
http://localhost:8100/, 改為http://88.128.18.144:8000,修改后的Constants.ts如下圖
-
如上描述,執(zhí)行
ionic serve和ionic run android --livereload默認啟動的ip和端口不一樣,導致配置有點不一樣,所以為了方便,使用ionic serve --port 8000 --address 88.128.18.144指定端口和ip啟動
方法三:后臺代碼配置-推薦
此方式比較通用
如下圖是java代碼,設(shè)置了login方法的響應(yīng)頭
response.setHeader("Access-Control-Allow-Origin", "*");-
這種方式的原理就是:服務(wù)端告訴瀏覽器,我的服務(wù)接受任何請求來源,請不要攔截
-
java后臺使用攔截器統(tǒng)一處理,這種方式前端最省心了
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"); // 緩存預(yù)檢請求，即一個小時內(nèi)不在發(fā)送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); // 緩存預(yù)檢請求粟耻，即一個小時內(nèi)不在發(fā)送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;
}
}
最后
相關(guān)文章:跨域資源共享 CORS 詳解
