項目開發爲了支持web瀏覽器ajax的直接請求,涉及到了跨域的需求,經過學習對跨域有了更深刻的認識,如今總結一下:前端
跨域指請求和服務的域不一致,瀏覽器和H5的ajax請求有影響,而對服務端之間的http請求沒有限制。 跨域是瀏覽器攔截了服務器端返回的相應,不是攔截了請求。
服務端的跨域支持主要包括兩種方式: 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剛開始認爲能夠維護一個域的列表,用逗號分隔,後期測試中發現不行,後來在一篇文章中看到此處只容許配置一個域,若是要實現多個域,能夠維護一個域列表,與請求中的域進行匹配,匹配成功,則設置跨域爲當前域。web
2.經過jsonp來實現跨域 使用jsonp來實現跨域能夠解決ie下不能跨域的問題,僅僅支持get請求 服務端多加一個參數callback,在返回數據時用callback把具體的數據包裹起來,傳回前端。 例:請求中callback的參數值爲jsonpcallback,返回數據爲{"code":0,"message":"ok"} 返回到前端的數據應該是jsonpcallback({"code":0,"message":"ok"})
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");
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 來實現ajax
JSONPObject ret = new JSONPObject(callback); ret.addParameter(data); //callback就是參數callback的值 //addParameter就是要返回的數據 //調用toJSONString便可看到結果
備註:第一次寫技術博客,若是有錯誤,請指正,共同進步。spring