解決跨域session 同步問題

跨域來源:(前端站點和后端API布署到不同的站點)

 

解決方案

一.服務端設置

1.配置允許跨域請求

public class BaseAction {
    /**
     * 支持跨域請求
     * @author fxd
     * @param response 
     * @since JDK 1.6
     */
    protected void crossComain(HttpServletRequest request,HttpServletResponse response){
        String[] allowDomains = {"http://www域名1","http://www域名2"};
        Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
        String originHeads = request.getHeader("Origin");
        if(allowOrigins.contains(originHeads)){
            //配置跨域訪問的最簡單的方式是用通配符 * ，（就是不安全，所有的請求都能跨域）
            response.setHeader("Access-Control-Allow-Origin", originHeads);
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,HEAD,PUT,PATCH");
            response.setHeader("Access-Control-Max-Age", "36000");
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,Authorization,authorization");
            response.setHeader("Access-Control-Allow-Credentials","true");//保持跨域 Ajax 時的 Cookie
        } 
    }
}

2.接口調用跨域方法

/**
 * 測試
 */
@Controller
public class Test extends BaseAction{

    @RequestMapping("Test")
    public void test(HttpServletRequest request,HttpServletResponse response){
        //調用允許跨域方法,此接口支持跨域請求
        crossComain(request, response);
        System.out.println("支持跨域請求");
    }
}

以上兩步就完成接口跨域請求了

 

二. 客戶端配置

1.因為在默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)。通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據。如果服務器接收帶憑據的請求，會用下面的HTTP頭部來響應。

/**
 * ajax post 跨域 request
 * @param {Object} url 請求地址
 * @param {Object} data 請求參數
 * @param {Object} success 成功回調
 * @param {Object} async 是否同步 false:同步 ture：異步
 */
function ajax_cross(url,data,success,async){
    $.ajax({
        type:"post",
        url:url,
        async:async,
        data:data,
        dataType:"json",
        xhrFields:{
            withCredentials:true
        },
        crossDomain:true,
        success:success
    });
}

 

2.調用分裝好的ajax方法:如圖

 $(function(){
     Test();
 });
    
 //測試
  function Test(){
     //跨域請求
     ajax_cross("/Test",{},function success(result){
          console.log(result);
     },false);
  }