摘要:跨域是瀏覽器攔截了服務(wù)器端返回的相應(yīng),不是攔截了請求。通過來實現(xiàn)跨域使用來實現(xiàn)跨域可以解決下不能跨域的問題,僅僅支持請求服務(wù)端多加一個參數(shù),在返回數(shù)據(jù)時用把具體的數(shù)據(jù)包裹起來,傳回前端。
項目開發(fā)為了支持web瀏覽器ajax的直接請求,涉及到了跨域的需求,通過學(xué)習(xí)對跨域有了更深入的認(rèn)識,現(xiàn)在總結(jié)一下:
1.跨域說明跨域指請求和服務(wù)的域不一致,瀏覽器和H5的ajax請求有影響,而對服務(wù)端之間的http請求沒有限制。 跨域是瀏覽器攔截了服務(wù)器端返回的相應(yīng),不是攔截了請求。2.服務(wù)端跨域支持
服務(wù)端的跨域支持主要包括兩種方式: 1.設(shè)置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剛開始認(rèn)為可以維護(hù)一個域的列表,用逗號分隔,后期測試中發(fā)現(xiàn)不行,后來在一篇文章中看到此處只允許配置一個域,如果要實現(xiàn)多個域,可以維護(hù)一個域列表,與請求中的域進(jìn)行匹配,匹配成功,則設(shè)置跨域為當(dāng)前域。
2.通過jsonp來實現(xiàn)跨域 使用jsonp來實現(xiàn)跨域可以解決ie下不能跨域的問題,僅僅支持get請求 服務(wù)端多加一個參數(shù)callback,在返回數(shù)據(jù)時用callback把具體的數(shù)據(jù)包裹起來,傳回前端。 例:請求中callback的參數(shù)值為jsonpcallback,返回數(shù)據(jù)為{"code":0,"message":"ok"} 返回到前端的數(shù)據(jù)應(yīng)該是jsonpcallback({"code":0,"message":"ok"})3.設(shè)置response的Header屬性實現(xiàn)
1.springboot實現(xiàn)(較新的版本支持) 1.1 方法級別 注解@CrossOrigin支持方法級別的跨域,支持多個不同的域,沒有測試過
@CrossOrigin(origins="http://xxx.com.cn",allowCredentials="false",maxAge=3600)
1.2 應(yīng)用級別
@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方式實現(xiàn)
1.客戶端發(fā)送ajax請求時,設(shè)置datatype為jsonp 2.服務(wù)端處理 (1)寫一個方法實現(xiàn)接口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 來實現(xiàn)
JSONPObject ret = new JSONPObject(callback); ret.addParameter(data); //callback就是參數(shù)callback的值 //addParameter就是要返回的數(shù)據(jù) //調(diào)用toJSONString即可看到結(jié)果
備注:第一次寫技術(shù)博客,如果有錯誤,請指正,共同進(jìn)步。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/67257.html
摘要:跨域是瀏覽器攔截了服務(wù)器端返回的相應(yīng),不是攔截了請求。通過來實現(xiàn)跨域使用來實現(xiàn)跨域可以解決下不能跨域的問題,僅僅支持請求服務(wù)端多加一個參數(shù),在返回數(shù)據(jù)時用把具體的數(shù)據(jù)包裹起來,傳回前端。 項目開發(fā)為了支持web瀏覽器ajax的直接請求,涉及到了跨域的需求,通過學(xué)習(xí)對跨域有了更深入的認(rèn)識,現(xiàn)在總結(jié)一下: 1.跨域說明 跨域指請求和服務(wù)的域不一致,瀏覽器和H5的ajax請求有影響,而對服務(wù)...
摘要:最近用來做項目,用來做前端自動化構(gòu)建。會在本地搭建一個服務(wù)器,在和后端調(diào)試的時候,就會涉及到跨域的問題。要向后端發(fā)送,前端也需要有相應(yīng)的配置。另外還要將設(shè)為。 最近用vue來做項目,用webpack來做前端自動化構(gòu)建。webpack-dev-server會在本地搭建一個服務(wù)器,在和后端調(diào)試的時候,就會涉及到跨域的問題。 剛開始時,沒有用vue-cli來構(gòu)建項目,而是參考了github上...
摘要:是一種新的服務(wù)端跨域方案。實現(xiàn)方式非常簡單。優(yōu)點相比,可以支持的所有請求方式,只支持方式因為本質(zhì)是通過標(biāo)簽的屬性訪問。缺點低版本瀏覽器不支持。 CORS是一種新的服務(wù)端跨域方案。實現(xiàn)方式非常簡單。 優(yōu)點:相比jsonp,可以支持http的所有請求方式,jsonp只支持get方式(因為本質(zhì)是通過script標(biāo)簽的src屬性訪問url)。支持ajax。缺點:低版本瀏覽器(IE9-)不支持。...
摘要:同源策略,它是由提出的一個著名的安全策略,現(xiàn)在所有支持的瀏覽器都會使用這個策略??蛻舳嗽趯ξ募{(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像,但其實并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數(shù)據(jù)交換方式,或者叫做數(shù)據(jù)描述格式。 JSON的優(yōu)點: 基于純文本,跨平臺傳遞極其簡單; Javas...
摘要:跨域總結(jié)跨域思路跨域解決方案一般分為兩種前端解決,后端解決前端解決方案通過前端解決的思想就是,通過設(shè)置中間件把跨域的請求轉(zhuǎn)發(fā)一下,其實就是反向代理,比如想要訪問豆瓣的接口很,但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉(zhuǎn)發(fā) 跨域總結(jié) 1.跨域思路 跨域解決方案一般分為兩種:前端解決,后端解決 1.1 前端解決方案 通過前端解決的思想就是,通過設(shè)置中間件把跨域的請求轉(zhuǎn)發(fā)...
閱讀 1667·2021-09-26 09:55
閱讀 5289·2021-09-22 15:40
閱讀 2027·2019-08-30 15:53
閱讀 1508·2019-08-30 11:15
閱讀 1725·2019-08-29 15:41
閱讀 1879·2019-08-28 18:13
閱讀 3159·2019-08-26 12:00
閱讀 1681·2019-08-26 10:30