快捷導(dǎo)航

Spring MVC中處理ajax請求的跨域問題與注意事項(xiàng)詳解

更新時(shí)間：2017年11月21日 11:15:09 作者：浪人~

跨域問題是我們大家在開發(fā)中會經(jīng)常遇到的一個(gè)問題，所以下面這篇文章主要給大家介紹了關(guān)于Spring MVC中處理ajax請求的跨域問題與注意事項(xiàng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

有時(shí)候前后臺做數(shù)據(jù)交互，會遇到煩人的跨域請求問題，如果你還是一枚編程小白來說，無疑來說是很痛苦的事。

當(dāng)然網(wǎng)上也肯定會有一些解決方法。但自身實(shí)力有限，不一定會看的懂，能把問題解決了。所以下面這篇文章就來給大家總結(jié)介紹在Spring MVC中處理ajax請求的跨域問題與一些注意事項(xiàng)，話不多說了，來一起看看詳細(xì)的介紹吧。

為何跨域

簡單的說即為瀏覽器限制訪問A站點(diǎn)下的js代碼對B站點(diǎn)下的url進(jìn)行ajax請求。假如當(dāng)前域名是www.abc.com，那么在當(dāng)前環(huán)境中運(yùn)行的js代碼，出于安全考慮，正常情況下不能訪問www.zzz.com域名下的資源。

解決方法

.首先要知道ajax請求的核心是JavaScrip對象和XmlHttpRequest，而瀏覽器請求的核心是瀏覽器

ajax請求

瀏覽器請求

場景一：使用ajax獲取session中的user（跨域）

從上圖可知，ajax每次訪問服務(wù)器時(shí)都沒有攜帶cookie，所以服務(wù)器每次都會分配一個(gè)新的session對象，所以ajax默認(rèn)請求是直接獲取不了session中的數(shù)據(jù)的。因此，如果我們想要通過ajax獲取當(dāng)前瀏覽器的session，我們必須保證每次發(fā)送請求都要攜帶cookie以確保獲取的事統(tǒng)一個(gè)session。

解決方法：step1.服務(wù)器設(shè)置接收ajax發(fā)送的cookie

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
//HandlerInterceptorAdapter//跨域設(shè)置
public class CrossInterceptor extends HandlerInterceptorAdapter {
　　
 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 response.addHeader("Access-Control-Allow-Origin","http://localhost:8080");
 response.addHeader("Access-Control-Allow-Methods","*");
 response.addHeader("Access-Control-Max-Age","100");
 response.addHeader("Access-Control-Allow-Headers", "Content-Type");
 //允許客戶端發(fā)送cookies true表示接收，false不接受 默認(rèn)為false？
 response.addHeader("Access-Control-Allow-Credentials","true");
 return super.preHandle(request, response, handler);
 } 

}

step2 。設(shè)置ajax請求攜帶cookie

$.ajax({
 url: url+'/checkout.action',
 type: 'GET',
 dataType: '',
 data: {verifyCode: VerificationCodeInput.value},
 //添加跨域
 async: false, 
 xhrFields: { 
  withCredentials: true 
 }, 
 crossDomain: true, 
 success:function(data){
  console.log(data);
 }
 });

注： xhrFields: { withCredentials: true }, crossDomain: true, 一定要加上?。。?！

這樣就可以愉快的玩耍了！　　　　

場景二：當(dāng)用戶需要校驗(yàn)session是否登陸（沒有登陸跳轉(zhuǎn)到登陸頁面）

基于場景一，已經(jīng)解決了回話問題但是在使用SpringMVC中

　　　　 request.getRequestDispatcher(xxxx.html").forward(request, response);
　　　　response.sendRedirect(http://www.baidu.com);

會報(bào)錯(cuò)。因?yàn)楫?dāng)服務(wù)器轉(zhuǎn)發(fā)或者重定向時(shí)返回的是一個(gè)頁面，因?yàn)橹挥袨g覽器才能解析顯示頁面，而ajax的對象卻不能，所以會報(bào)錯(cuò)錯(cuò)。

解決辦法：因?yàn)閍jax請求對象不能解析顯示頁面，所以不能直接轉(zhuǎn)發(fā)或重定向，這時(shí)我們需要繞過服務(wù)器，直接使用瀏覽器跳轉(zhuǎn)頁面，但是對于session過期（用戶沒有登陸）我們要給瀏覽器一個(gè)反饋，我們可以給瀏覽器一個(gè)大于等于600的錯(cuò)誤碼

String requestType = request.getHeader("X-Requested-With");
 if(requestType != null && "XMLHttpRequest".equalsIgnoreCase(requestType.trim())) {
  //如果是ajax請求就設(shè)置一個(gè)自定義響應(yīng)頭
  response.setHeader("sessionStatus", "timeout");　　　　　　　 //設(shè)置錯(cuò)誤碼以及錯(cuò)誤碼提示
  response.sendError(666, "session timeout");
  return false;
 }

同時(shí)要對ajax設(shè)置全局options　　　　

$.ajaxSetup({
 type:'post',
 complete:function(xhr, ts){ //XMLHttpRequest, textStatus
 var sessionStatus = xhr.getResponseHeader('sessionstatus');
 if(sessionStatus == 'timeout') {
  alert('用戶沒有登陸，請登錄！');
  window.top.location.href = 'Login.html';
 }
 }
});

這樣就可以通過瀏覽器進(jìn)行頁面跳轉(zhuǎn)了！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: