jsonp原理
利用script標簽沒有跨域限制的漏洞渠旁，網(wǎng)頁可以從其他來源動態(tài)生成的json．
jsonp優(yōu)缺點
優(yōu)：兼容性好
缺：僅支持 get 方法
jsonp實現(xiàn)流程
- 聲明一個回調(diào)函數(shù)(
callback)，其函數(shù)名當做參數(shù)备徐，傳給需要跨域訪問的服務端，服務端將目標數(shù)據(jù)當做形參返回給客戶端 - 客戶端創(chuàng)建
script標簽揣钦，并在script標簽地址上帶上?callback=xxx - 服務端將傳過來的函數(shù)名與需要返回的數(shù)據(jù)進行字符串拼接嫂伞，如
show('helloworld') - 客戶端聲明回調(diào)函數(shù)的方法，并調(diào)用
前端頁面：
function createJsonP(url, data, callback) {
return new Promise((resolve, reject) => {
// 生成script標簽
let eScript = document.createElement('script');
const eBody = document.body;
let params = [];
window[callback] = function(data) {
resolve(data);
// 完成后移除script標簽
eBody.removeChild(eScript);
};
eScript.id = new Date().getTime();
for(let i in data) {
params.push(`${i}=${data[i]}`);
}
params = params.join('&');
eScript.src = `${url}?${params}&callback=${callback}`;
// 插入body
eBody.appendChild(eScript);
});
}
createJsonP('/test', {
username: 'admin',
pass: '123',
}, 'show').then((data) => {
console.log(data); // 用戶名是：admin, 密碼是：123
});
server端（以nodejs為例）：
const express = require('express');
const app = express();
app.get('/test', (req, res) => {
const {username, pass, callback } = req.query;
res.end(`${callback}('用戶名是：${username}, 密碼是：${pass}')`);
});
app.listen(1828);
