解決跨域訪問,最常用有三種辦法
- CORS
- jsonp
- 代理
CORS
cross origin resource share垢揩,跨資源共享
- 主要是站在服務(wù)端的角度骗炉,對外開放訪問權(quán)限
- 要求卵佛,我們需要有權(quán)限去編寫(修改)服務(wù)端的代碼
- 同時,在瀏覽器端茧痕,不用寫任何代碼
注意:
Cors插件不是真正的解決方案野来,只是一個臨時,在開發(fā)的時候踪旷,可以用一用而已曼氛。
項目上線的時候,不可能使用這種方案令野。
jsonp
json with packing搪锣,json的一個包裝,是一種協(xié)議彩掐,協(xié)議用來傳遞數(shù)據(jù)的构舟。是途徑。好比是傳遞情報的方式堵幽。
原理:
因為script標簽 本身是可以進行跨域訪問的狗超,我們利用這一點,創(chuàng)建一個方法朴下,動態(tài)的去添加一個script標簽努咐,并指定url,當請求成功殴胧,服務(wù)端返回一個js字符串渗稍,作為script標簽內(nèi)容,可以直接被js執(zhí)行
我們可以通過在瀏覽器端定義一個函數(shù)callback团滥,傳遞給服務(wù)端竿屹,服務(wù)端可以獲取這個callback,并把要返回的數(shù)據(jù)灸姊,作為這個callback的參數(shù)拱燃,返回callback,
function addScript(url) {
let script = docunment.creatElement('script');
script.src = url;
documnet.body.appendChild(script);
}
function cb(res){
console.log(res);
}
addScript('網(wǎng)址?callback=cb');
注意
要實現(xiàn)jsonp力惯,在服務(wù)端和瀏覽器端都需要編寫相應(yīng)的代碼碗誉。
Jsopn的原理是基于script標簽,它==只能實現(xiàn)get跨域==父晶,不能實現(xiàn)post跨域哮缺。[注意]
jsonp和json的區(qū)別,
- Json甲喝,javascript object notation尝苇,js對象表示,是一個種格式,本質(zhì)是字符串茎匠。是數(shù)據(jù)。好比是情報押袍。
- Jsonp诵冒,json with packing,json的一個包裝谊惭,是一種協(xié)議汽馋,協(xié)議用來傳遞數(shù)據(jù)的。是途徑圈盔。好比是傳遞情報的方式豹芯。
代理
因為cros和jsonp都是需要后端有配合代碼,所以當后端沒有配合代碼的時候驱敲,我們可以自己寫一個后端铁蹈,然后替前端去請求數(shù)據(jù)
我們可以把要請求的接口作為數(shù)據(jù)發(fā)送給 作為代理的后端
$.ajax({
url: '/daili',
type: 'get',
data: '接口地址',
datatype: 'json',
seccess: function(res){
console.log(res);
}
})
接著后端獲取到發(fā)送的數(shù)據(jù)
app.get('/daili', (req, res) => {
let url = req.query.url;
http.get(url, (response) => {
let data = '';
response.on('data', (chunk) => {
data += chunk;
});
response.on('end', () => {
res.json(JSON.parse(data));
})
})
})