如何跨域訪問的兩種方法~
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":"指定來源域名"|"*"
})