JSONP和CORS兩種跨域方式的簡單介紹和解決方案實例

　　隨着軟件開發分工趨於精細，前后端開發分離成為趨勢，前端同事負責前端頁面的展示及頁面邏輯處理，服務端同事負責業務邏輯處理同時通過API為前端提供數據也為前端提供數據的持久化能力，考慮到前后端同事開發工具和習慣的不同，必然需要將前后端項目進行獨立，再者考慮到網站訪問速度的問題，需要將靜態資源部署到CDN服務器上這樣項目分離也成為了必然。然而項目分離部署分離帶來的問題就是跨域請求的問題，本例對比較流行的兩種跨域訪問方式（Jsonp和CORS）進行討論。

一、簡要介紹

1.1、JSONP

　　JSONP是利用瀏覽器對script的資源引用沒有同源限制，通過動態插入一個script標簽，當資源加載到頁面后會立即執行的原理實現跨域的。JSONP是一種非正式傳輸協議，該協議的一個要點就是允許用戶傳遞一個callback或者開始就定義一個回調方法，參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
　　JSONP只支持GET請求而不支持POST等其它類型的HTTP請求,它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題，JSONP的優勢在於支持老式瀏覽器，弊端也比較明顯：需要客戶端和服務端定制進行開發，服務端返回的數據不能是標准的Json數據，而是callback包裹的數據。

1.2、CORS

　　CORS是現代瀏覽器支持跨域資源請求的一種方式，全稱是"跨域資源共享"（Cross-origin resource sharing），當使用XMLHttpRequest發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，后台進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin;瀏覽器判斷該相應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。
　　CORS與JSONP的使用目的相同，但是比JSONP更強大，CORS支持所有的瀏覽器請求類型，承載的請求數據量更大，開放更簡潔，服務端只需要將處理后的數據直接返回，不需要再特殊處理。

 

二、跨域解決方案距離

2.1、JSONP方案實現跨域

前段AJAX請求

$.ajax({
     url: "http://otherdomain.com/manage/role/get",
     async: false,
     type: "get", 5      dataType: "jsonp",
     data:{
        "id":1 
     },
     jsonp: "callback",
     jsonpCallback:"fn",
     success: function(data){
         alert(data.code);
     },
     error: function(){
         alert('fail');
     }
})

服務端響應數據

@RequestMapping("/manage/role/get")
@ResponseBody
public String get(HttpServletRequest request, HttpServletResponse response) {
    BaseOutput outPut = new BaseOutput();
    try {
        QueryFilter filter = new QueryFilter(request);
        logger.info(filter.toString());
        String id = filter.getParam().get(MainConst.KEY_ID);
        if(!StringUtil.isEmpty(id)) {
            ImRole role = roleService.getByPk(filter);
            outPut.setData(role);
        }
        else {
            outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
            outPut.setMsg("The get id is needed.");
        }
    } catch (Exception e) {
        logger.error("獲取角色數據異常！", e);
        outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
        outPut.setMsg("獲取角色數據異常！ " + e.getMessage());
    }
    return "fn("+JsonUtil.objectToJson(outPut)+")";
}

注意內容：

1、Ajax請求需要設置請求類型為Jsonp

dataType: "jsonp"

2、Ajax請求需要設置回調函數，當前函數值必須與服務器響應包含的callback名稱相同

jsonpCallback:"fn"

3、Ajax請求可以設置jsonp（可選），傳遞給請求處理程序或頁面，用以獲得jsonp回調函數名的參數名，默認為:callback

jsonp: "callback"

4、服務端返回Json數據必須使用jsonpCallback設置的值進行包裹

return "fn("+JsonUtil.objectToJson(outPut)+")"

 

 

2.2、CORS方案實現跨域

前段AJAX請求

function test() {
   $.ajax({
         url: "http://localhost:8080/AdsServer/manage/role/get",
         type: "get",
         async: false,
         data:{
            "id":1 
         },
         dataType:"json",
         withCredentials:true,
         success: function(data){
             alert(data);
             alert(data.code);
         },
         error: function(){
             alert('fail');
         }
   })
}

 

服務端響應數據

@RequestMapping("/manage/role/get")
@ResponseBody
public String get(HttpServletRequest request, HttpServletResponse response) {
    BaseOutput outPut = new BaseOutput();
    try {
        QueryFilter filter = new QueryFilter(request);
        logger.info(filter.toString());
        String id = filter.getParam().get(MainConst.KEY_ID);
        if(!StringUtil.isEmpty(id)) {
            ImRole role = roleService.getByPk(filter);
            outPut.setData(role);
        }
        else {
            outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
            outPut.setMsg("The get id is needed.");
        }
    } catch (Exception e) {
        logger.error("獲取角色數據異常！", e);
        outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
        outPut.setMsg("獲取角色數據異常！ " + e.getMessage());
    }
    return JsonUtil.objectToJson(outPut); 23 }

服務端增加過濾攔截器（web.xml）

<filter>
    <filter-name>crossDomainFilter</filter-name>
    <filter-class>com.luwei.core.filter.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>crossDomainFilter</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

服務端增加過濾攔截器（java）

package com.luwei.core.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.luwei.console.mg.constant.ApplicationConfiConst;

/**
 * 
 * <Description> TODO<br> 
 *  
 * @author lu.wei<br>
 * @email [e-mail] <br>
 * @date 2017年1月4日 <br>
 * @since V1.0<br>
 * @see com.luwei.console.mg.tag <br>
 */
public class CrossDomainFilter implements Filter {
    private Logger logger = LoggerFactory.getLogger(getClass());

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        ApplicationConfiConst confiConst = (ApplicationConfiConst) ContextUtil.getBean("applicationConfiConst");
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        String referer = request.getHeader("referer");
        String origin = null;
        if (null != referer) {
            String[] domains = confiConst.getCanAccessDomain().split(",");
            for (String domain : domains) {
                if (StringUtils.isNotEmpty(domain) && referer.startsWith(domain)) {
                    origin = domain;
                    break;
                }
            }
        }
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        // 是否支持cookie跨域
        response.addHeader("Access-Control-Allow-Credentials", "true");

        String requestURI = ((HttpServletRequest) req).getRequestURI();
        long begin = System.currentTimeMillis();
        chain.doFilter(req, res);
        if (logger.isDebugEnabled()) {
            logger.debug("[Request URI: " + requestURI + "], Cost Time:" + (System.currentTimeMillis() - begin) + "ms");
        }
    }
}

增加設置能夠通過跨域訪問的服務器地址

#設置能夠訪問接口的域（多個通過都好分割）（不能配置127.0.0.1）
CAN_ACCESS_DOMAIN=http://localhost:8020,http://localhost:9999,http://localhost:8080

 

注意內容：

1、Ajax請求必須要設置withCredentials屬性為true

withCredentials:true

2、服務端需要配置過濾器，講配置能夠進行跨域訪問服務器的地址進行配置

response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 是否支持cookie跨域
response.addHeader("Access-Control-Allow-Credentials", "true");

3、withCredentials設置成true時，Access-Control-Allow-Origin不支持通過*的方式進行統配

4、Access-Control-Allow-Origin不能直接配置多個請求服務器，但是可以通過靜態配置多個的方式，然后根據referer匹配，匹配到哪個則設置Access-Control-Allow-Origin為哪個的方式來配置多個

 

后記：

jqGrid配置跨域請求的方式為：

ajaxGridOptions: {
    xhrFields: {
        withCredentials: true
    }
},

 

參考：

http://www.ruanyifeng.com/blog/2016/04/cors.html

http://www.cnblogs.com/dojo-lzz/p/4265637.html