【跨域】jsonp的實現
阿新 • • 發佈：2021-11-08
1.跨域是瀏覽器是瀏覽器的安全策略。協議、域名、埠號不同都會引起跨域。
2.html標籤的src屬性可以發起http請求，並不受跨域限制
服務端程式碼
服務端返回一段js執行程式碼，例如 func(data)。這段程式碼會在客戶端執行
const http = require('http'); const urllib = require('url'); const data = [ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 18 }, { name: 'wangwu', age: 18 }, ]; const port = 3000; http.createServer(function (req, res) { const urlParse = new urllib.URL(req.url, `http://127.0.0.1:${port}/`); const { searchParams } = urlParse; const callback = searchParams.get('callback'); const name = searchParams.get('name'); if (callback) { const hit = data.find(x => x.name === name);const result = `${callback}(${JSON.stringify(hit)})`; res.end(result); } }).listen(port); console.log(`Server running at http://127.0.0.1:${port}/`);
客戶端程式碼
1.新建window.callback函式，直接返回資料；
2.新建script標籤，將callback函式名和請求引數拼到url中，作為src的值；
3.將script元素放到body中，自動發起http請求，返回一段執行callback函式的js程式碼；
4.執行window.callback，返回資料；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> function getJsonP(url, params) { return new Promise((resolve, reject) => { const callbackKey = `callback_${Date.now()}`; const ele = document.createElement('script'); const query = Object.keys(params).reduce((pre, curr) => { return `${pre}&${curr}=${params[curr]}`; }, ''); ele.src = `${url}${url.indexOf('?') === -1 ? '?' : '&'}callback=${callbackKey}${query}`; window[callbackKey] = (data) => { delete window[callbackKey]; resolve(data); document.body.removeChild(ele); }; document.body.append(ele); }); }; getJsonP('http://localhost:3000/?name=zhangsan', { name: 'zhangsan' }).then(data => { console.log(data); }); </script> </html>