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

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

....

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

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

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

編寫GET接口

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

編寫POST接口

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

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

//配置解析表單數據的中間件
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’)導入中間件
• 在路由之前調用app.use(cros())配置中間件

3.什么是cros

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

瀏覽器的同源安全策略默認會阻止網頁"跨域"或缺資源，但是如果接口服務器配置了CROS相關的HTTP響應頭

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

4.cros的注意事項

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

5.cros請求的分類

客戶端在請求cors接口時，根據 請求方式和請求頭的不同，跨域將cros的請求分為兩大類，分別是：

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

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

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

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

JSONP接口

1.回顧jsonp的概念和特點

概念 ：瀏覽器通過/

特點：

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

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

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

3.實現JSONP接口的步驟

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

4.實現JSONP接口的具體代碼

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

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

調用$.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);
? ? ? ? },
? ? });
});

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

最新評論