解決跨域訪問,最常用有三種辦法
- CORS
- jsonp
- 代理
CORS
cross origin resource share,跨資源共享
- 主要是站在服務端的角度,對外開放訪問權限
- 要求,我們需要有權限去編寫(修改)服務端的代碼
- 同時,在瀏覽器端,不用寫任何代碼
注意:
Cors插件不是真正的解決方案,只是一個臨時,在開發的時候,可以用一用而已。
項目上線的時候,不可能使用這種方案。
jsonp
json with packing,json的一個包裝,是一種協議,協議用來傳遞數據的。是途徑。好比是傳遞情報的方式。
原理:
因為script標簽 本身是可以進行跨域訪問的,我們利用這一點,創建一個方法,動態的去添加一個script標簽,并指定url,當請求成功,服務端返回一個js字符串,作為script標簽內容,可以直接被js執行
我們可以通過在瀏覽器端定義一個函數callback,傳遞給服務端,服務端可以獲取這個callback,并把要返回的數據,作為這個callback的參數,返回callback,
function addScript(url) {
let script = docunment.creatElement('script');
script.src = url;
documnet.body.appendChild(script);
}
function cb(res){
console.log(res);
}
addScript('網址?callback=cb');
注意
要實現jsonp,在服務端和瀏覽器端都需要編寫相應的代碼。
Jsopn的原理是基于script標簽,它==只能實現get跨域==,不能實現post跨域。[注意]
jsonp和json的區別,
- Json,javascript object notation,js對象表示,是一個種格式,本質是字符串。是數據。好比是情報。
- Jsonp,json with packing,json的一個包裝,是一種協議,協議用來傳遞數據的。是途徑。好比是傳遞情報的方式。
代理
因為cros和jsonp都是需要后端有配合代碼,所以當后端沒有配合代碼的時候,我們可以自己寫一個后端,然后替前端去請求數據
我們可以把要請求的接口作為數據發送給 作為代理的后端
$.ajax({
url: '/daili',
type: 'get',
data: '接口地址',
datatype: 'json',
seccess: function(res){
console.log(res);
}
})
接著后端獲取到發送的數據
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));
})
})
})