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.二、CORS

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

 

2、跨域解決方案距離

2.一、JSONP方案實現跨域

前段AJAX請求

 1 $.ajax({
 2      url: "http://otherdomain.com/manage/role/get",
 3      async: false,
 4      type: "get", 5      dataType: "jsonp",
 6      data:{
 7         "id":1 
 8      },
 9      jsonp: "callback",
10      jsonpCallback:"fn",
11      success: function(data){
12          alert(data.code);
13      },
14      error: function(){
15          alert('fail');
16      }
17 })

服務端響應數據

 1 @RequestMapping("/manage/role/get")
 2 @ResponseBody
 3 public String get(HttpServletRequest request, HttpServletResponse response) {
 4     BaseOutput outPut = new BaseOutput();
 5     try {
 6         QueryFilter filter = new QueryFilter(request);
 7         logger.info(filter.toString());
 8         String id = filter.getParam().get(MainConst.KEY_ID);
 9         if(!StringUtil.isEmpty(id)) {
10             ImRole role = roleService.getByPk(filter);
11             outPut.setData(role);
12         }
13         else {
14             outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
15             outPut.setMsg("The get id is needed.");
16         }
17     } catch (Exception e) {
18         logger.error("獲取角色數據異常！", e);
19         outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
20         outPut.setMsg("獲取角色數據異常！ " + e.getMessage());
21     }
22     return "fn("+JsonUtil.objectToJson(outPut)+")";
23 }

注意內容：

一、Ajax請求須要設置請求類型爲Jsonp

dataType: "jsonp"

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

jsonpCallback:"fn"

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

jsonp: "callback"

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

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

 

 

2.二、CORS方案實現跨域

前段AJAX請求

 1 function test() {
 2    $.ajax({
 3          url: "http://localhost:8080/AdsServer/manage/role/get",
 4          type: "get",
 5          async: false,
 6          data:{
 7             "id":1 
 8          },
 9          dataType:"json",
10          withCredentials:true,
11          success: function(data){
12              alert(data);
13              alert(data.code);
14          },
15          error: function(){
16              alert('fail');
17          }
18    })
19 }

 

服務端響應數據

 1 @RequestMapping("/manage/role/get")
 2 @ResponseBody
 3 public String get(HttpServletRequest request, HttpServletResponse response) {
 4     BaseOutput outPut = new BaseOutput();
 5     try {
 6         QueryFilter filter = new QueryFilter(request);
 7         logger.info(filter.toString());
 8         String id = filter.getParam().get(MainConst.KEY_ID);
 9         if(!StringUtil.isEmpty(id)) {
10             ImRole role = roleService.getByPk(filter);
11             outPut.setData(role);
12         }
13         else {
14             outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
15             outPut.setMsg("The get id is needed.");
16         }
17     } catch (Exception e) {
18         logger.error("獲取角色數據異常！", e);
19         outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
20         outPut.setMsg("獲取角色數據異常！ " + e.getMessage());
21     }
22     return JsonUtil.objectToJson(outPut); 23 }

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

1 <filter>
2     <filter-name>crossDomainFilter</filter-name>
3     <filter-class>com.luwei.core.filter.CrossDomainFilter</filter-class>
4 </filter>
5 <filter-mapping>
6     <filter-name>crossDomainFilter</filter-name>
7     <url-pattern>*</url-pattern>
8 </filter-mapping>

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

 1 package com.luwei.core.filter;
 2 
 3 import java.io.IOException;
 4 
 5 import javax.servlet.Filter;
 6 import javax.servlet.FilterChain;
 7 import javax.servlet.FilterConfig;
 8 import javax.servlet.ServletException;
 9 import javax.servlet.ServletRequest;
10 import javax.servlet.ServletResponse;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 
14 import org.apache.commons.lang.StringUtils;
15 import org.slf4j.Logger;
16 import org.slf4j.LoggerFactory;
17 
18 import com.luwei.console.mg.constant.ApplicationConfiConst;
19 
20 /**
21  * 
22  * <Description> TODO<br> 
23  *  
24  * @author lu.wei<br>
25  * @email 1025742048@qq.com <br>
26  * @date 2017年1月4日 <br>
27  * @since V1.0<br>
28  * @see com.luwei.console.mg.tag <br>
29  */
30 public class CrossDomainFilter implements Filter {
31     private Logger logger = LoggerFactory.getLogger(getClass());
32 
33     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
34         ApplicationConfiConst confiConst = (ApplicationConfiConst) ContextUtil.getBean("applicationConfiConst");
35         HttpServletResponse response = (HttpServletResponse) res;
36         HttpServletRequest request = (HttpServletRequest) req;
37         String referer = request.getHeader("referer");
38         String origin = null;
39         if (null != referer) {
40             String[] domains = confiConst.getCanAccessDomain().split(",");
41             for (String domain : domains) {
42                 if (StringUtils.isNotEmpty(domain) && referer.startsWith(domain)) {
43                     origin = domain;
44                     break;
45                 }
46             }
47         }
48         response.setHeader("Access-Control-Allow-Origin", origin);
49         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PATCH");
50         response.setHeader("Access-Control-Max-Age", "3600");
51         response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
52         // 是否支持cookie跨域
53         response.addHeader("Access-Control-Allow-Credentials", "true");
54 
55         String requestURI = ((HttpServletRequest) req).getRequestURI();
56         long begin = System.currentTimeMillis();
57         chain.doFilter(req, res);
58         if (logger.isDebugEnabled()) {
59             logger.debug("[Request URI: " + requestURI + "], Cost Time:" + (System.currentTimeMillis() - begin) + "ms");
60         }
61     }
62 }

增長設置可以經過跨域訪問的服務器地址

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

 

注意內容：

一、Ajax請求必需要設置withCredentials屬性爲true

withCredentials:true

二、服務端須要配置過濾器，講配置可以進行跨域訪問服務器的地址進行配置

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");

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

四、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