近年來,隨著Web前端技術(shù)的迅速發(fā)展,前端框架的流行與常規(guī)的后端API接口交互方式已經(jīng)無法滿足復(fù)雜業(yè)務(wù)邏輯和用戶需求之間的深度融合,Ajax跨域請(qǐng)求因其極好的分布式特性和強(qiáng)大的異步交互功能受到廣大前端工程師的青睞。那么,什么是Ajax跨域請(qǐng)求呢?
Ajax跨域請(qǐng)求是指在當(dāng)前頁面中通過Ajax異步獲取其他域名下的資源或數(shù)據(jù),該請(qǐng)求與當(dāng)前頁面的域名不一致,涉及到了瀏覽器的同源策略(同協(xié)議、同域名、同端口)限制。跨域請(qǐng)求能否實(shí)現(xiàn),本質(zhì)上取決于服務(wù)器端是否允許ajax請(qǐng)求訪問其資源。
那么,如何實(shí)現(xiàn)跨域請(qǐng)求呢?一般來說,有以下幾種方式:
一、CORS(跨源資源共享)
二、JSONP(JSON with Padding)
三、代理模式
1. CORS(跨源資源共享)
CORS是一種W3C標(biāo)準(zhǔn),是由瀏覽器和服務(wù)器共同實(shí)現(xiàn)的跨域解決方案。CORS通過在http頭信息中添加一些自定義字段,告訴瀏覽器該響應(yīng)是否允許當(dāng)前域名下的頁面向其發(fā)起Ajax請(qǐng)求。CORS的最大優(yōu)點(diǎn)是能夠減少寫代碼的負(fù)擔(dān),缺點(diǎn)是需要服務(wù)器配合,支持跨域。
CORS的核心思想是通過在瀏覽器和服務(wù)器之間添加HTTP頭部,來告知瀏覽器,以允許Web應(yīng)用程序訪問一個(gè)跨域服務(wù)器端的資源。例如:
// 客戶端代碼
$.ajax({
url: 'http://test.com:9090/api/data',
type: 'GET',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function(data) {
console.log(data)
}
});
//服務(wù)端代碼
response.setHeader('Access-Control-Allow-Origin', 'http://test.com');
response.setHeader('Access-Control-Allow-Credentials', true);
2. JSONP(Json with Padding)
JSONP是一種比較老舊的跨域請(qǐng)求方案,雖然它已經(jīng)不那么流行,但是在部分場(chǎng)景下,依舊具備著不可替代的價(jià)值。JSONP的核心思想是利用script標(biāo)簽的src屬性發(fā)起Ajax請(qǐng)求,在服務(wù)端返回jsonp格式的數(shù)據(jù),服務(wù)端代碼片段如下:
app.get('/api/data', function(req, res) {
const jsonData = { name: 'tom', age: 18 }
const callback = req.query.callback //讀取callback值
res.send(`${callback}(${JSON.stringify(jsonData)})`) //返回jsonp數(shù)據(jù)
})
客戶端代碼片段如下:
3. 代理模式
代理模式是前端處理跨域問題的另一種解決方案,所謂代理模式就是通過后端代理把Ajax請(qǐng)求“轉(zhuǎn)發(fā)”到可以訪問的域名上,這樣就不會(huì)出現(xiàn)跨域問題。但是這種方式需要前后端共同協(xié)作,增加了開發(fā)成本和調(diào)試難度。
總之,跨域是Web開發(fā)中比較棘手的問題,但是開發(fā)者只要理解并掌握跨域請(qǐng)求的相關(guān)技術(shù)和應(yīng)對(duì)方式,就可以在前端技術(shù)領(lǐng)域中大顯身手了。