創(chuàng)建基本的服務(wù)器

//導(dǎo)入express模塊
const express =require('rexpress')
//創(chuàng)建express的服務(wù)器實例
const app=express()

....

//調(diào)用app.listen方法 ，指定端口號并啟動web服務(wù)器
app.listen(80,function(){
  console.log('server running at http://127.0.0.1');
})

創(chuàng)建API路由模塊

// apiRouter.js
var express=require('express')  //導(dǎo)入express
var apiRouter=express.Router() //創(chuàng)建路由對象
module.exports=router //向外導(dǎo)出對象
//app.js
const apiRouter=require('./apiRouter')
app.use('api',apiRouter)

編寫GET接口

apiRouter.get('/get',(req,res)=>{
//1.獲取到客戶端通過查詢字符串，發(fā)送到服務(wù)器的數(shù)據(jù)
const query=req.query
//2.調(diào)用res.send()方法 ，把數(shù)據(jù)響應(yīng)給客戶端
? ? res.send({
? ? ? ? status:0,?? ??? ? ? ? ? //狀態(tài)，0表示成功 ?1表示失敗
? ? ? ? msg:'GET請求成功,?? ??? ?// 狀態(tài)描述
? ? ? ? data:query?? ??? ? ? ? ? //需要響應(yīng)給客戶端的數(shù)據(jù)
? ? })
})

編寫POST接口

apiRouter.post('/post',(req,res)=>{
//1.獲取到客戶端通過查詢字符串，發(fā)送到服務(wù)器的數(shù)據(jù)
const body=req.body
//2.調(diào)用res.send()方法 ，把數(shù)據(jù)響應(yīng)給客戶端
? ? res.send({
? ? ? ? status:0,?? ??? ? ? ? ? //狀態(tài)，0表示成功 ?1表示失敗
? ? ? ? msg:'POST請求成功,?? ??? ?// 狀態(tài)描述
? ? ? ? data:body?? ??? ? ? ? ? //需要響應(yīng)給客戶端的數(shù)據(jù)
? ? })
})

在拿到路由之前需要配置解析表單的中間件

//配置解析表單數(shù)據(jù)的中間件
app.use(express.urlencoded({extended:false}))

CROS跨域資源共享

1.接口的跨域問題

剛才編寫的GET和POST接口，存在一個很嚴重的問題:不支持跨域請求。解決接口跨域問題的方案主要有兩種

• CORS(主流的解決方案，推薦使用)CORS(主流的解決方案，推薦使用)
• JSONP(有缺陷的解決方案:只支持GET請求)有缺陷的解決方案:只支持GET請求

2.使用cros中間件拒絕跨域問題

cros是Express的一個第三方的中間件。通過安裝和配置cors中間件，可以很方便的解決跨域問題

使用步驟

• 運行npm install cros 安裝中間件
• 使用const cros=require(‘cros’)導(dǎo)入中間件
• 在路由之前調(diào)用app.use(cros())配置中間件

3.什么是cros

cros(Cross-Origin Resource Sharing，跨域資源共享)由一系列HTTP響應(yīng)頭組成，這些HTTP響應(yīng)頭決定瀏覽器是否阻止前端JS代碼跨域獲取資源

瀏覽器的同源安全策略默認會阻止網(wǎng)頁"跨域"或缺資源，但是如果接口服務(wù)器配置了CROS相關(guān)的HTTP響應(yīng)頭

就可以接觸瀏覽器端的跨域訪問限制

4.cros的注意事項

• cros主要在服務(wù)器端進行配置?？蛻舳藶g覽器無需做任何額外的配置，即可請求開啟了cros的接口
• cros在瀏覽器在有兼容性。

5.cros請求的分類

客戶端在請求cors接口時，根據(jù) 請求方式和請求頭的不同，跨域?qū)ros的請求分為兩大類，分別是：

• 簡單請求
  • 請求方式：GET,POST,HEAT 三者之一
  • HTTP頭部信息不超過一下幾種字段：無自定義頭部，Accept,Accept-Language,Content-Language,DPR,Dpwnlink,Sava-Data,Viewport-Width,Width,Content-Type
• 預(yù)檢請求
  • 請求方式為GET,POST,HEAD之外的請求Method類型
  • 請求頭在包含自定義頭部字段
  • 向服務(wù)器發(fā)送了application/json格式的數(shù)據(jù)

在瀏覽器與服務(wù)器正式通信之前，瀏覽器會發(fā)送OPTION請求進行預(yù)檢，以獲取瀏覽器是否允許該實際請求，所以這一次的OPTION請求為“預(yù)檢請求”,服務(wù)器成功響應(yīng)預(yù)檢請求后，才會發(fā)送真正的請求，并且攜帶真實數(shù)據(jù)

6.簡單請求和預(yù)檢請求的區(qū)別

簡單請求的特點: 客戶端與服務(wù)器之間只會發(fā)生一次請求。
預(yù)檢請求的特點: 客戶端與服務(wù)器之間會發(fā)生兩次請求，OPTION預(yù)檢請求成功之后，才會發(fā)起真正的請求。

JSONP接口

1.回顧jsonp的概念和特點

概念 ：瀏覽器通過/

特點：

• JSONP不屬于真正的ajax請求，因為它沒有使用XMLHttpRequest這個對象
• JSONP僅支持GET請求，不支持POST,PUT,DELETE等請求

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

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

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

• 獲取客戶端的發(fā)送過來的回調(diào)函數(shù)的名字
• 得到要通過JSONP形式發(fā)送給客戶端的數(shù)據(jù) JSON.stringify()
• 根據(jù)前面兩走的到的數(shù)據(jù)，拼接出一個函數(shù)調(diào)用的字符串
• 把上一步拼接得到的字符串，響應(yīng)給客戶端的/

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

app.get('/api/jsonp',(req,res)=>{
? //獲取客戶端發(fā)送過來的回調(diào)函數(shù)的名字
? const ?funcName=req.query.callback
? //得到要通過JSONP形式發(fā)送給客戶端的數(shù)據(jù)
? const data={name:'zs',age:22}
? //根據(jù)前面兩步得到的數(shù)據(jù)，拼接一個函數(shù)調(diào)用的字符串
? const scriptStr=`${funcName}(${JSON.stringify(data)})`
? //把上一步得到的拼接字符串，響應(yīng)給客戶端的<script>標簽進行解析
? res.send(scriptStr)
})

5.在網(wǎng)頁在使用jq發(fā)起jsonp請求

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

$("#btnJSONP").on("click", function () {
? ? $.ajax({
? ? ? ? type: "GET",
? ? ? ? url: "http://127.0.0.1/api/jsonp",
? ? ? ? dataType: "jsonp",
? ? ? ? success: function (res) {
? ? ? ? console.log(res);
? ? ? ? },
? ? });
});

到此這篇關(guān)于Node.js使用express寫接口的文章就介紹到這了,更多相關(guān)Node.js使用express寫接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論