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

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

....

//調(diào)用app.listen方法 ，指定端口號(hào)并啟動(dòng)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)建路由對(duì)象
module.exports=router //向外導(dǎo)出對(duì)象
//app.js
const apiRouter=require('./apiRouter')
app.use('api',apiRouter)

編寫GET接口

apiRouter.get('/get',(req,res)=>{
//1.獲取到客戶端通過(guò)查詢字符串，發(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請(qǐng)求成功,?? ??? ?// 狀態(tài)描述
? ? ? ? data:query?? ??? ? ? ? ? //需要響應(yīng)給客戶端的數(shù)據(jù)
? ? })
})

編寫POST接口

apiRouter.post('/post',(req,res)=>{
//1.獲取到客戶端通過(guò)查詢字符串，發(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請(qǐng)求成功,?? ??? ?// 狀態(tài)描述
? ? ? ? data:body?? ??? ? ? ? ? //需要響應(yīng)給客戶端的數(shù)據(jù)
? ? })
})

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

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

CROS跨域資源共享

1.接口的跨域問(wèn)題

剛才編寫的GET和POST接口，存在一個(gè)很嚴(yán)重的問(wèn)題:不支持跨域請(qǐng)求。解決接口跨域問(wèn)題的方案主要有兩種

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

2.使用cros中間件拒絕跨域問(wèn)題

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

使用步驟

• 運(yùn)行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代碼跨域獲取資源

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

就可以接觸瀏覽器端的跨域訪問(wèn)限制

4.cros的注意事項(xiàng)

• cros主要在服務(wù)器端進(jìn)行配置。客戶端瀏覽器無(wú)需做任何額外的配置，即可請(qǐng)求開(kāi)啟了cros的接口
• cros在瀏覽器在有兼容性。

5.cros請(qǐng)求的分類

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

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

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

6.簡(jiǎn)單請(qǐng)求和預(yù)檢請(qǐng)求的區(qū)別

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

JSONP接口

1.回顧jsonp的概念和特點(diǎn)

概念 ：瀏覽器通過(guò)/

特點(diǎn)：

• JSONP不屬于真正的ajax請(qǐng)求，因?yàn)樗鼪](méi)有使用XMLHttpRequest這個(gè)對(duì)象
• JSONP僅支持GET請(qǐng)求，不支持POST,PUT,DELETE等請(qǐng)求

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

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

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

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

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

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

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

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

$("#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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論