2. 程式人生 > >跨域方式 jsonp cors

跨域方式 jsonp cors

阿新 • • 發佈：2018-11-26

一、簡要介紹

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請求

複製程式碼

 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 }

複製程式碼

注意內容：

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請求

複製程式碼

 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 [email protected] <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

 

注意內容：

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
    }
},
轉自：https://www.cnblogs.com/banning/p/6250677.html

相關推薦

跨域方式 jsonp cors

一、簡要介紹 1.1、JSONP 　　JSONP是利用瀏覽器對script的資源引用沒有同源限制，通過動態插入一個script標籤，當資源載入到頁面後會立即執行的原理實現跨域的。JSONP是一種非正式傳輸協議，該協議的一個要點就是允許使用者傳遞一個callback或者開始就定義一個回撥方法，

jQuery-ajax系列用法及JSONP,跨域資源共享CORS

jQuery-ajax 基本使用 $.ajax({ url:'json.php', //設定的是請求引數，二者沒關係 data:{name:'張三',age:'18'}, //用於設定響應體型別 dataType:'json', type:'

Ajax跨域（jsonp方式）

 1.Client $.ajax({ type:"get", url:"http://localhost:8022/helloDemo2", async:true,

JavaScript跨域問題之CORS方法與JSONP的對比

什麼是跨域？ 只要協議、域名、埠有任何一個不同，都會被當成不同的域。而JavaScript同源政策的限制，無法進行跨域呼叫 解決方法： 1.跨域資源共享（CORS）: 定義了在訪問跨域資源時，瀏覽器與伺服器應該如何溝通。背後的基本思想就

ajax 跨域封裝 JSONP方式 預設還是GET提交請求

/**--jquery ajax請求處理外掛類--**/ var WebsiteAjax = { returnData : null, //獲取一個例項 getInstance : function(settings){ /** * 預設的200回

跨域請求——jsonp與cors

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type

JS跨域方案JSONP與CORS的各自優缺點以及應用場景

從問題來看，相信題主已經瞭解JSONP與CORS的基本知識，回答也是建立在此基礎上。首先明確：JSONP與CORS的使用目的相同，並且都需要服務端和客戶端同時支援，雖然功能上講CORS更為強大，但是需要根據應用場景選擇使用哪一個。JSONP（json with padding 填充式json），利用了使用sr

Jquery Ajax 跨域之JSONP方式極簡示例,服務端是.net的ashx

使用JQuery Ajax的JSONP方式跨域訪問是非常簡便了，缺點是隻能使用GET方式，而且靈活性非常差。 稍作小結： 原理：其實是JQuery利用HTML標籤<script>可以跨域的這一特性演變而來,所以必須應用JQuery 缺點：只能get並且呼叫極為不

跨域資源共享CORS詳解

附加 accep 不發送 地址 code 克服 通信 數據 ror 簡介 CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。 它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX

AJAX 跨域請求 - JSONP獲取JSON數據

tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP？ 　　JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callb

跨域訪問之CORS

基本 支持 oar 技術分享 過程 ets attribute 響應 api CORS:定義 2014年1月16日，W3C的Web應用工作組（Web Applications Working Group）和Web應用安全工作組（Web AppSec）聯合發布了跨源資

跨域資源共享(CORS)

flight turn 地理 add example html 變化 ring 否則 　　通過 XHR 實現 Ajax 通信的一個主要限制,來源於跨域安全策略。默認情況下,XHR 對象只能訪 問與包含它的頁面位於同一個域中的資源。這種安全策略可以預防某些惡意行為。但是,實現

請求跨域解決方法CORS

status 跨域 以及 methods 當前頁 function sin style 配置 CORS全稱Cross-Origin Resource Sharing，是HTML5規範定義的如何跨域訪問資源。 Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScr

前端跨域之jsonp

sca clas ext call rip oct utf-8 title initial demo1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

c# WebApi之解決跨域問題：Cors

error: avi 域名 1.10 settings dev ger gin .dll 什麽是跨域問題 出於安全考慮，瀏覽器會限制腳本中發起的跨站請求，瀏覽器要求JavaScript或Cookie只能訪問同域下的內容。由於這個原因，我們不同站點之間的數據訪問會被

跨域&JSONP

參數 tps css 發送 端口 訪問 效果 cor end 1. 同源&跨域 1.1 什麽是同源？什麽是跨域？ 同源：協議頭、域名、端口完全一致就叫同源 跨域：協議頭、域名、端口有一個不一樣就叫跨域 判斷是否同源，如：http://www.exampl

前端面試題之跨域方式

前端面試題之跨域方式 常用的： jsonP：通過script標籤呼叫不同域的js把引數帶回來 CORS：通過服務端在響應頭設定Access-Control-AllowOrigin欄位進行跨域 還有： window.name：一個頁面跳轉之後，它的w

php 跨域 ajax jsonp請求

直接看帶程式碼：     php介面端返回 ：   $jsonp = 'test'; echo($jsonp.'('.json_encode($pay).')'); //oCnu50RF4MlIiBI42OoXfvm_dd

[JS]筆記18_AJAX2_iframe元素&AJAX跨域&JSONP跨域

1、iframe元素 iframe元素會建立包含另外一個文件的內聯框架 常用屬性： frameborder屬性規定是否顯示框架周圍的邊框 值：0/1 src屬性規定要顯示的文件的URL 可是：html、文字、ASP等 scrolling屬性規定是否顯示滾動條 值：ye

熟悉又陌生的跨域訪問與CORS

說到跨域訪問,是既熟悉又陌生，熟悉是因為只要做過web專案，尤其是前後端分離的專案，都碰到過ajax跨域訪問的麻煩，跨域訪問就如字面意思，只要協議、域名、埠有任何一個不同，都被當作是不同的域。對於跨域訪問，是有限制的;陌生的是，很多跨域無法訪問的問題只能一味網上找解決方案，而不知道跨域乃