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

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

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

1. 概念及特點

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

特點： ① JSONP 不屬于真正的 Ajax 請求，因為它沒有使用 XMLHttpRequest 這個對象

② JSONP 僅支持 GET 請求，不支持 POST、PUT、DELETE 等請求

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

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

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

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

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

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

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

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

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

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

4. 實現(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 請求

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

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

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

實現(xiàn)步驟

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

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

const url = require('url')

const http = require('http')

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

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

    if(pathname == '/api/data'){
        //定義對象，返回給前端的   數(shù)據(jù)
        const obj = {code:200,message:'jsonp形式返回給前端'}
        //返回一個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) //獲取請求除域名外的地址 例如 localhost:300/api  只獲取/api
})
server.listen(3000,()=>{
    console.log("服務(wù)已啟動")
})

在客戶端的代碼

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

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