摘要:跨域是瀏覽器攔截了服務器端返回的相應,不是攔截了請求。通過來實現跨域使用來實現跨域可以解決下不能跨域的問題,僅僅支持請求服務端多加一個參數,在返回數據時用把具體的數據包裹起來,傳回前端。
項目開發為了支持web瀏覽器ajax的直接請求,涉及到了跨域的需求,通過學習對跨域有了更深入的認識,現在總結一下:
1.跨域說明跨域指請求和服務的域不一致,瀏覽器和H5的ajax請求有影響,而對服務端之間的http請求沒有限制。 跨域是瀏覽器攔截了服務器端返回的相應,不是攔截了請求。2.服務端跨域支持
服務端的跨域支持主要包括兩種方式: 1.設置response的Header屬性
response.setHeader("Access-Control-Allow-Origin", "*");//允許跨域訪問的域,可以是通配符”*”; response.setHeader("Access-Control-Allow-Methods", "POST, GET"); response.setHeader("Access-Control-Max-Age", "1800"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); response.setHeader("Access-Control-Allow-Credentials", "true");
注:Access-Control-Allow-Origin剛開始認為可以維護一個域的列表,用逗號分隔,后期測試中發現不行,后來在一篇文章中看到此處只允許配置一個域,如果要實現多個域,可以維護一個域列表,與請求中的域進行匹配,匹配成功,則設置跨域為當前域。
2.通過jsonp來實現跨域 使用jsonp來實現跨域可以解決ie下不能跨域的問題,僅僅支持get請求 服務端多加一個參數callback,在返回數據時用callback把具體的數據包裹起來,傳回前端。 例:請求中callback的參數值為jsonpcallback,返回數據為{"code":0,"message":"ok"} 返回到前端的數據應該是jsonpcallback({"code":0,"message":"ok"})3.設置response的Header屬性實現
1.springboot實現(較新的版本支持) 1.1 方法級別 注解@CrossOrigin支持方法級別的跨域,支持多個不同的域,沒有測試過
@CrossOrigin(origins="http://xxx.com.cn",allowCredentials="false",maxAge=3600)
1.2 應用級別
@Configuration public class WebAppConfig extends WebMvcConfigurerAdapter { /** * 跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowCredentials(false).maxAge(3600); } }
2.直接使用response來做處理
response.setHeader("Access-Control-Allow-Origin", "*");//允許跨域訪問的域,可以是通配符”*”; response.setHeader("Access-Control-Allow-Methods", "POST, GET"); response.setHeader("Access-Control-Max-Age", "1800"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); response.setHeader("Access-Control-Allow-Credentials", "true");4.jsonp方式實現
1.客戶端發送ajax請求時,設置datatype為jsonp 2.服務端處理 (1)寫一個方法實現接口MethodInterceptor,重寫invoke方法
String callback = request.getParameter("callback"); if(StringUtils.isNotBlank(callback)){ Object ret = invocation.proceed(); return callback+"("+ret+")"; }else{ Object ret = invocation.proceed(); return ret; }
(2)使用fastjson的JSONPObject 來實現
JSONPObject ret = new JSONPObject(callback); ret.addParameter(data); //callback就是參數callback的值 //addParameter就是要返回的數據 //調用toJSONString即可看到結果
備注:第一次寫技術博客,如果有錯誤,請指正,共同進步。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83775.html
摘要:跨域是瀏覽器攔截了服務器端返回的相應,不是攔截了請求。通過來實現跨域使用來實現跨域可以解決下不能跨域的問題,僅僅支持請求服務端多加一個參數,在返回數據時用把具體的數據包裹起來,傳回前端。 項目開發為了支持web瀏覽器ajax的直接請求,涉及到了跨域的需求,通過學習對跨域有了更深入的認識,現在總結一下: 1.跨域說明 跨域指請求和服務的域不一致,瀏覽器和H5的ajax請求有影響,而對服務...
摘要:最近用來做項目,用來做前端自動化構建。會在本地搭建一個服務器,在和后端調試的時候,就會涉及到跨域的問題。要向后端發送,前端也需要有相應的配置。另外還要將設為。 最近用vue來做項目,用webpack來做前端自動化構建。webpack-dev-server會在本地搭建一個服務器,在和后端調試的時候,就會涉及到跨域的問題。 剛開始時,沒有用vue-cli來構建項目,而是參考了github上...
摘要:是一種新的服務端跨域方案。實現方式非常簡單。優點相比,可以支持的所有請求方式,只支持方式因為本質是通過標簽的屬性訪問。缺點低版本瀏覽器不支持。 CORS是一種新的服務端跨域方案。實現方式非常簡單。 優點:相比jsonp,可以支持http的所有請求方式,jsonp只支持get方式(因為本質是通過script標簽的src屬性訪問url)。支持ajax。缺點:低版本瀏覽器(IE9-)不支持。...
摘要:同源策略,它是由提出的一個著名的安全策略,現在所有支持的瀏覽器都會使用這個策略??蛻舳嗽趯ξ募{用成功之后,也就獲得了自己所需的數據,剩下的就是按照自己需求進行處理和展現了,這種獲取遠程數據的方式看起來非常像,但其實并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數據交換方式,或者叫做數據描述格式。 JSON的優點: 基于純文本,跨平臺傳遞極其簡單; Javas...
摘要:跨域總結跨域思路跨域解決方案一般分為兩種前端解決,后端解決前端解決方案通過前端解決的思想就是,通過設置中間件把跨域的請求轉發一下,其實就是反向代理,比如想要訪問豆瓣的接口很,但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉發 跨域總結 1.跨域思路 跨域解決方案一般分為兩種:前端解決,后端解決 1.1 前端解決方案 通過前端解決的思想就是,通過設置中間件把跨域的請求轉發...
閱讀 2234·2021-11-16 11:44
閱讀 641·2019-08-30 15:55
閱讀 3271·2019-08-30 15:52
閱讀 3595·2019-08-30 15:43
閱讀 2196·2019-08-30 11:21
閱讀 435·2019-08-29 12:18
閱讀 1945·2019-08-26 18:15
閱讀 468·2019-08-26 10:32