1. 程式人生 > >如何跨域訪問的兩種方法~

如何跨域訪問的兩種方法~

1. JSONP,需要客戶端與服務端配合
    什麼是:填充式JSON——JSON with Padding
    何時: 今後跨域,首選jsonp
    如何:
     基本思想:用其它可以跨域請求的元素,代替ajax
     程式中都是用<script>元素代替ajax傳送請求
     方案一:
      1. 服務端: 將要返回的資料,填充進一條字串格式的js語句中,組成一條正確的可執行的js語句,再返回
      2. 客戶端: 新增<script src="伺服器端地址">
      結果: script可跨域請求到伺服器返回的js語句,並在客戶端立刻執行。
      問題: 服務端返回的js語句是寫死的,眾口難調。
     方案二:
      1. 服務端: 返回一條自定義函式的呼叫語句
        要求客戶端必須執行指定名稱的函式
      2. 客戶端: 提前定義一個與服務端同名的函式
        函式有一個引數可接受伺服器端的資料
        函式內可執行任意操作
      問題: 函式名是寫死的,極容易發生衝突!
     方案三:
      1. 服務端:接受一個函式名引數
                 將客戶端發來的函式名引數拼接到js語句的開頭!
      2. 客戶端:<script src="地址?引數名=本地函式名"
      問題: script是寫死的!只能在頁面載入時請求一次
     方案四:
      1. 服務端不變
      2. 客戶端: 動態建立script元素
        script只要被加到頁面上,就立刻自動請求
        問題: script不斷累積
        解決: 在回撥函式中自動刪除script
    其實: $.ajax也支援jsonp
     $.ajax({
       ... ,
       dataType:"jsonp",
       ...
     })
     強調: dataType:"jsonp"需要伺服器端配合才能實現。
     其實,dataType:"jsonp"的原理和方案四一致:
      1. 也是通過在head中動態新增<script>傳送請求
      2. 也是通過?callback=函式名,傳送函式名到服務端
      3. 函式名其實是$.ajax自動為success函式生成的隨機函式名。
  2. CORS,只要伺服器端允許即可
    在伺服器端新增響應頭: node中:
       res.writeHead(200,{
         "Content-Type":"application/json;charset=utf-8",
         "Access-Control-Allow-Origin":"指定來源域名"|"*"
       })