通過跨域去請(qǐng)求服務(wù)端數(shù)據(jù)
需要客戶端與服務(wù)端
必須違反同源協(xié)議：同協(xié)議 同域名 同端口

客戶端：
通過script標(biāo)簽的src向不同的服務(wù)器請(qǐng)求數(shù)據(jù)
只能以get方式請(qǐng)求數(shù)據(jù)
src：它是一種資源請(qǐng)求， 不存在跨域
script標(biāo)簽：它引入的是js 并且將js執(zhí)行一遍

封裝一個(gè)方法（jsonp）
通過傳入請(qǐng)求路徑(url) 以及預(yù)先協(xié)商好的回調(diào)函數(shù)名字（callbackName）請(qǐng)求數(shù)據(jù)

function jsonp(url, callbackname) {

需要?jiǎng)討B(tài)創(chuàng)建script標(biāo)簽

let script = document.createElement('script');

給script標(biāo)簽添加src路徑 = url + 回調(diào)函數(shù) + 回調(diào)函數(shù)名字

script.src = url + '?callback=' + callbackname

將創(chuàng)建的script標(biāo)簽插入body

document.body.appendChild(script);
}

調(diào)用jsonp傳入url以及callbackName

jsonp('http://127.0.0.1:3000/jsonp', 'aa');

回調(diào)函數(shù)響應(yīng)服務(wù)端數(shù)據(jù)

function aa(data) {
        console.log(data)
    }

服務(wù)端思路：

引入http模塊—>創(chuàng)建服務(wù)，監(jiān)聽端口-->獲取客戶端請(qǐng)求路徑，引入 url模塊—>實(shí)例化URL獲取客戶端請(qǐng)求路徑, 并將路徑附給一個(gè)變量AppUrl—>通過AppUrl.pathname判斷請(qǐng)求的路徑—>通過AppUrl.searchParams.get()獲取回調(diào)函數(shù)名字—> res.end響應(yīng)前端數(shù)據(jù)，通過回調(diào)函數(shù)將數(shù)據(jù)返回給客戶端預(yù)先定義好的callback函數(shù)里

引入模塊：

const http = require('http');
const {URL} = require('url');

創(chuàng)建服務(wù)，監(jiān)聽端口

http.createServer((req, res)=> {
    const appUrl = new URL('http://127.0.0.1:3000' + decodeURIComponent(req.url));
    if(appUrl.pathname === '/jsonp') {
        // 獲取到預(yù)先定義好的callback函數(shù)名字
        let callbackName = appUrl.searchParams.get('callback');
        res.end(callbackName + '(' + JSON.stringify({name: 123, age: 18}) + ')')
    }
}).listen(3000, err=> {
    console.log('服務(wù)啟動(dòng)成功')
})

今天的分享就到這里啦，如有錯(cuò)誤，歡迎不吝指出，筆芯~