天天看點

【ajax跨域】ajax跨域學習總結(一)

前言

域名又稱網域、網域名稱,是由一串用點分隔的名字組成的Internet上某一台計算機或計算機組的名稱,用于在資料傳輸時辨別計算機的電子方位(有時也指地理位置)。internet的核心服務DNS(Domain Name System,網域名稱系統,有時也簡稱為域名)提供域名到IP位址的相映射。以友善使用者不用去記機器能識别的IP位址。

域名的劃分。我們所熟悉的com,gov,edu,cn,hk,us,tw等等這些是頂級域名,一般用來配置設定給特殊機構或者某個國家用于辨別。在頂級域名下,每個Web網站會到各自國家的域名服務提供商那裡去申請域名,申請到的域名就是二級域名,例如:google.com,baidu.com,segmentfault.com等等。在二級域名下,一些大的Web網站一般會根據不同的業務或者功能等,使用不同的子域名即三級域名,例如code.google.com,mail.google.com等等。依此類推,再往下就是三級域名,例如:xxx.xxx.xxx.xxx。一般使用的比較少。說到這,我想你已經可以分辨域名等級了。對于一個url,去掉協定頭(例如http://,https://),相對路徑(例如/xxx.htm,/xxx/xxx.htm?a=xxx),剩下的部分,看有幾個'.',有n個,就是n級域名,沒有就是頂級域名。

內域、外域、跨域都是有一個參照物的概念,必須以某個URL為基準,其他的URL對于其而言是屬于內域還是外域。對于同一級域名下的所有URL,都屬于一個域。

如以mail.google.com/abc/xxx.htm為基準。

內域:mail.google.com/def/xxx.htm與其屬于同一個域,故可以認為是內域。

外域:google.com/abc/xxx.htm與其的域名級别不同,不屬于同一個域故可認為是外域。

跨域:跨域更多是用來辨別某個跳轉的動作。如從一個域下面(mail.google.com/abc/xxx.htm)跳轉到另一個域下面(google.com/abc/xxx.htm),就可以認為是跨域。是以外域辨別的兩個URL之間的跳轉,就是跨域跳轉。

由于浏覽器在通路Web網站的時候會與Web伺服器建立Seesion(這個做Web開發的應該很清楚了吧,如不太清楚請自行google之),session在浏覽器端的儲存是通過一個seesionid來維護,而seesionid的作用域是與域名綁定的,不同域名的session是不同的。是以導緻了不同域名下的Web站點需要共享某些資訊(例如使用者的登入資訊等)時,就有跨域的問題。通常這是跨域導緻的主要問題之一,比較好的解決方案就是SSO。對于跨域還有很多前端的問題:例如JS不能跨域調用等等,由于本人對前端不是十分了解,就不做表述了。

下面是幾個簡單的跨域例子:

1、一級域名不同:google.com與baidu.com

2、一級域名相同,二級域名不同:mail.google.com與code.google.com

3、依此類推,n級域名相同,n+1級域名不同...

除了這些之外,一般有些人所說的跨域往往還包括:

4、域名相同,端口不同:xxx.com:80與xxx.com:8080  同一個IP不同端口,也是跨域

5、域名相同,協定不同:http://xxx.com與https://xxx.com

6、IP與域名的混合:http://127.0.0.1/和 http://localhost/

前言來自:https://segmentfault.com/q/1010000000151618/a-1020000000151637

為什麼會發生跨域問題

1.浏覽器限制:

浏覽器出于安全的考慮,當浏覽器發現跨域時,它會做一些校驗,校驗不通過時,它就會報錯跨域安全問題。

在示例中,(示例見文章尾部)

【ajax跨域】ajax跨域學習總結(一)

200:說明請求被正确處理,控制台也列印輸出資訊。則伺服器沒有任何問題,而且正确處理,是浏覽器報錯的原因.

跨域的安全限制都是對浏覽器端來說的,伺服器端是不存在跨域安全限制的

2.跨域

你發送的請求不屬于本域。協定、域名、端口号任何一個不一樣,都是跨域。

3.XHR(XMLHttpRequest)請求

<a href="http://localhost:8080/test/getResult" target="_blank" rel="external nofollow" >發送請求2</a>
<img src="http://localhost:8080/test/getResult"/>
           

這兩種請求方式都不是XHR請求(1.document,2.json),他們不會報關于跨域安全問題的錯。

【ajax跨域】ajax跨域學習總結(一)
【ajax跨域】ajax跨域學習總結(一)

這三個情況同時滿足才會産生跨域安全問題

解決思路

1.浏覽器禁止檢查

cmd中輸入:

【ajax跨域】ajax跨域學習總結(一)

2.JSONP解決跨域問題

Jsonp(JSON with Padding) 是 json 的一種"使用模式",是非官方協定,它是一個約定。Jsonp可以讓網頁從别的域名(網站)那擷取資料,即跨域讀取資料。jsonp是一個同源政策。端口和主機對于兩個頁面是相同的,則兩個頁面具有相同的源,否則就是不同源的。

使用jsonp背景伺服器需要修改代碼的:

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice() {
        // jsonp請求攜帶一個前背景約定的參數(預設callback,如果寫成callback1這類,ajax請求中做以下修改),便于讓背景識别是jsonp請求,背景則傳回js資料而非json資料
        super("callback");
    }
}


//背景:super("callback1");時

  $.ajax({
           url: base + "/getResult",
           dataType: "jsonp",
           callback:"callback1",
           success: function (data) {
              result = data;
           }
       });

           

重新整理後,不再報錯。

【ajax跨域】ajax跨域學習總結(一)

請求中還有一個參數:_=随機生成的數字,它的作用是防止請求被緩存。如果ajax請求中加上cache:true,這個參數将沒有。

【ajax跨域】ajax跨域學習總結(一)

請求類型是script

jsonp實作原理:

與原來不同之處:請求類型不同,jsonp的請求類型是script;傳回類型也不同,jsonp傳回的是js

【ajax跨域】ajax跨域學習總結(一)

json核心就是:允許使用者傳遞一個callback參數給服務端,然後服務端傳回資料時會将這個callback參數作為函數名來包裹住JSON資料,這樣用戶端就可以随意定制自己的函數來自動處理傳回資料了。

Jsonp的弊端

  • 伺服器需要改動代碼支援(如果調用非自己的接口,就無法進行修改了)
  • 隻支援GET
  • 發送的不是XHR請求(ajax的異步就沒有了)

示例:https://github.com/InnocenceWj/ajax_cross_domain.git

繼續閱讀