JQuery的Ajax功能可以快速地向服務(wù)器發(fā)送請求和接收響應(yīng)。但是,有時(shí)候我們需要通過Ajax向不同的域(即源)發(fā)送請求,這種情況下就會遇到跨域訪問的問題。
跨域的原因是瀏覽器限制,防止不同源的腳本進(jìn)行惡意操作。有時(shí)候我們需要從不同的服務(wù)器獲取數(shù)據(jù),為了避免這個(gè)問題,我們需要使用JSONP或者CORS。
$.ajax({ url: 'http://www.example.com/api', dataType: 'jsonp', success: function(data) { console.log(data); } });
JSONP(JSON with Padding)是一種跨域方法,通過添加回調(diào)函數(shù)并在服務(wù)器返回時(shí)執(zhí)行,可以避免跨域問題。首先,在服務(wù)器上定義一個(gè)函數(shù),該函數(shù)返回需要的數(shù)據(jù);然后在客戶端訪問該函數(shù)以獲取該數(shù)據(jù)。
$.ajax({ url: 'http://www.example.com/api', type: 'GET', dataType: 'json', crossDomain: true, xhrFields: { withCredentials: true }, success: function(data) { console.log(data); }, error: function(xhr, status, error) { console.log(error); } });
CORS(Cross-Origin Resource Sharing)是另一種跨域方法,它可以讓瀏覽器向服務(wù)器發(fā)起跨域請求,并允許服務(wù)器返回?cái)?shù)據(jù)。在Ajax請求中使用CORS時(shí),需要在服務(wù)器中設(shè)置響應(yīng)頭來允許請求源。
以上是兩種跨域解決方案。需要注意的是,使用JSONP時(shí),需要保證服務(wù)器返回的數(shù)據(jù)是可信的;而使用CORS會涉及到更多的安全問題,需要謹(jǐn)慎使用。