jsonp 跨域方法詳解

什麼事跨域

瀏覽器的同源策略，出於防範跨站指令碼的攻擊，禁止客戶端指令碼（如 JavaScript）對不同域的服務進行跨站呼叫。

- 協議名protocol
- 主機host
- 埠號port
- 這三個中的任意一個不同，網站間的資料請求與傳輸便構成了跨域呼叫。

XMLHttpRequest 有跨域請求限制

• 不同域名，主機名會有跨域限制

  • 127.0.0.1
  • 192.168.135.25

• 同域名不同埠號也會有跨域限制

  • 127.0.0.1:3000
  • 127.0.0.1:5000

解決辦法

模擬一個 jsonp 方法

    在JavaScript中script標籤是不受跨域限制的，所有我們使用自動建立一個 <script
 
> 標籤來進行跨域請求資料。

js程式碼如下

//url 請求的路徑
//params 請求的引數
// fn 響應後返回的回撥函式
function jsonp(url,params,fn){
// 定義一個strParam 變數 用於迴圈接收到傳遞的引數

var strParam ="";
for(var p in params){
    strParam += p + "=" + params[p] +"&";
}

//定義一個隨機變數 避免全域性程式碼汙染

var randomFn = "fn_"+ Math.random.toString().toSubString(2
 
);
//定義一個變數 掛載回撥函式
window[randomFn]= function(data){   //方法**  後臺返回之後這裡呼叫  匿名函式自調 得到後臺響應的值
    fn(data);
}
var realUrl = url+"?"+strParam + "callback "+"="+randomFn;
function jsonp(url,params,fn)
var newScript= document.createElement("script");
newScript.src=realUrl;
document.body.appendChild("newScript")
 
;
}

// 呼叫jsonp 函式
jsonp(url,params,function(data){
    console.log(data);
})

nodejs 模擬後臺處理請求

var http = require("http");
var server = http.createServer();
var url = require("url");

server.on("request",function(req,resp){
    var ObjUrl = url.parse(req.url,true);
    var relUrl = ObjUrl.query;
    resp.end(relUrl.callback+"("+'{"userName":"yourName"}'+")")
// ！！！！注意 這裡的callback是你前臺js的引數callback  ，可以自定義，但是必須和前面一一對應
// 後面拼接一個 含物件引數的方法返回去
// !!!!注意  這裡也是我們的核心思想  我們這裡返回通過url引數請求的callback 獲取對應的返回函式 
// 採用的是前臺定義 後臺執行的方法，當後臺返回是預設會在前端呼叫 window裡面掛載的函式,通過自調的方式
//得到響應的請求值 。這裡我是預設返回一個{“userName”：“yourName”} 如果relUrl.callback=demo
// 那麼可以看為 demo({“userName”：“yourName”}) ,當資料返回到前臺是就會呼叫前臺定義的 “方法**“”

// 返回什麼資料有自己定義  這樣你就可以在呼叫jsonp方法的時候在function（data）{console.log(data)} 獲
//取data 進行使用
//
})