快捷導(dǎo)航

Node.js使用JSONP接口的具體用法

更新時(shí)間：2024年03月11日 15:15:12 作者：愛健身的小劉同學(xué)

JSONP是一個(gè)跨域解決方案,本文主要介紹了Node.js使用JSONP接口的具體用法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 概念及特點(diǎn)

概念：瀏覽器通過 <script> 標(biāo)簽的 src 屬性，請(qǐng)求服務(wù)器上的數(shù)據(jù)，同時(shí)服務(wù)器返回一個(gè)函數(shù)的調(diào)用。這種請(qǐng)求數(shù)據(jù)的方式叫做 JSONP

特點(diǎn)： ① JSONP 不屬于真正的 Ajax 請(qǐng)求，因?yàn)樗鼪]有使用 XMLHttpRequest 這個(gè)對(duì)象

② JSONP 僅支持 GET 請(qǐng)求，不支持 POST、PUT、DELETE 等請(qǐng)求

2. 創(chuàng)建 JSONP 接口的注意事項(xiàng)

如果項(xiàng)目中已經(jīng)配置了 CORS 跨域資源共享，為了防止沖突，必須在配置 CORS 中間件之前聲明 JSONP 的接口。否者 JSONP 接口會(huì)被處理成開啟了 CORS 的接口

// 優(yōu)先創(chuàng)建 JSONP 接口    [這個(gè)接口不會(huì)被處理成 CORS 接口]
app.get('/api/jsonp', (req, res) =&gt; { })

// 配置 CORS 中間件 [后續(xù)的所有接口都會(huì)被處理成 CORS 接口]
app.use(cors())

// 這是一個(gè)開啟了 CORS 的接口
app.get('/api/get', (req, res) =&gt; { })

3. 實(shí)現(xiàn) JSONP 接口的步驟

① 獲取客戶端發(fā)送過來的回調(diào)函數(shù)的名字

② 得到要通過 JSONP 形式發(fā)送給客戶端的數(shù)據(jù)

③ 根據(jù)前兩步得到的數(shù)據(jù)，拼接出一個(gè)函數(shù)調(diào)用的字符串

④ 把上一步拼接得到的字符串，響應(yīng)給客戶端的 <script> 標(biāo)簽進(jìn)行解析執(zhí)行

4. 實(shí)現(xiàn) JSONP 接口的具體代碼

app.get('/api/jsonp', (req, res) => {
    // 1. 
    const funName = req.query.callback
    // 2. 
    const data = { name: 'zj', age: '22' }
    // 3. 
    const scriptStr = `${funName}(${JSON.stringify(data)})`
    // 4. 
    res.send(scriptStr)
})

5. 在網(wǎng)頁中使用 JQuery 發(fā)起 JSONP 請(qǐng)求

調(diào)用 $.ajax()函數(shù)，提供 JSONP 的配置選項(xiàng)，從而發(fā)起 JSONP 請(qǐng)求

$('#btnJSONP').on('click', () => {
    $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1/api/jsonp',
        dataType: 'jsonp', // 表示要發(fā)起的是 JSONP 請(qǐng)求
        success: (res) => {
            console.log(res)
        }
    })
})

使用JSONP格式實(shí)現(xiàn)跨域

實(shí)現(xiàn)步驟

動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽
src指向接口的地址
定義一個(gè)函數(shù)和后端調(diào)用的函數(shù)名一樣

實(shí)現(xiàn)代碼 -- 在nodejs中使用http內(nèi)置模塊起一個(gè)服務(wù)，端口號(hào)為3000

const url = require('url')

const http = require('http')

const server = http.createServer((req,res)=>{
    if(req.url === '/favicon.ico') return  //圖標(biāo)忽略 --- 圖標(biāo)地址也會(huì)請(qǐng)求后臺(tái)服務(wù)
    const {query,pathname} = url.parse(req.url,true)  //若加上true這個(gè)參數(shù)，query字符串參數(shù)會(huì)自動(dòng)轉(zhuǎn)成對(duì)象格式

    //設(shè)置頭部信息 狀態(tài)為200 內(nèi)容為JSON格式  如果要返回html片段這設(shè)置為text/html
    res.writeHead(200, { 'Content-Type': 'application/json' });

    if(pathname == '/api/data'){
        //定義對(duì)象，返回給前端的   數(shù)據(jù)
        const obj = {code:200,message:'jsonp形式返回給前端'}
        //返回一個(gè)JSON調(diào)用的函數(shù)
        res.end(`toFront(${JSON.stringify(obj)})`)
    }else{
        //簡單處理了
        res.writeHead(404, { 'Content-Type': 'application/json' });
        res.end('404')

    }

   //jsonp跨域操作
   //  console.log(req.url) //獲取請(qǐng)求除域名外的地址 例如 localhost:300/api  只獲取/api
})
server.listen(3000,()=>{
    console.log("服務(wù)已啟動(dòng)")
})

在客戶端的代碼

 <script type="text/javascript">
    //jsonp跨域步驟
    //1.動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽
    const newscript = document.createElement('script')
    //2.src指向接口的地址
    newscript.src = 'http://localhost:3000/api/data'
    document.body.appendChild(newscript  )
    //3.定義一個(gè)函數(shù)和后端調(diào)用的函數(shù)名一樣
    function toFront(res){
      //后臺(tái)返回的數(shù)據(jù)  這個(gè)函數(shù)是后臺(tái)服務(wù)調(diào)用過來的
      console.log(res) 
    }
  </script>

執(zhí)行的結(jié)果 ,返回一個(gè)JSON格式的文檔