NodeJs Express框架實(shí)現(xiàn)服務(wù)器接口詳解
創(chuàng)建基本的服務(wù)器
創(chuàng)建 API 路由模塊
編寫 GET 接口
編寫 POST 接口
注意：如果要獲取 URL-encoded 格式的請(qǐng)求體數(shù)據(jù)，必須配置中間件 app.use(express.urlencoded({ extended: false }))
CORS 跨域資源共享
1. 接口的跨域問(wèn)題
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<button id="btnDelete">DELETE</button>
<button id="btnJSONP">JSONP</button>
<script>
$(function () {
// 1. 測(cè)試GET接口
$('#btnGET').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/get',
data: { name: 'zs', age: 20 },
success: function (res) {
console.log(res)
},
})
})
// 2. 測(cè)試POST接口
$('#btnPOST').on('click', function () {
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/api/post',
data: { bookname: '水滸傳', author: '施耐庵' },
success: function (res) {
console.log(res)
},
})
})
// 3. 為刪除按鈕綁定點(diǎn)擊事件處理函數(shù)
$('#btnDelete').on('click', function () {
$.ajax({
type: 'DELETE',
url: 'http://127.0.0.1/api/delete',
success: function (res) {
console.log(res)
},
})
})
// 4. 為 JSONP 按鈕綁定點(diǎn)擊事件處理函數(shù)
$('#btnJSONP').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
success: function (res) {
console.log(res)
},
})
})
})
</script>
</body>
剛才編寫的 GET 和 POST接口，存在一個(gè)很嚴(yán)重的問(wèn)題：不支持跨域請(qǐng)求。
解決接口跨域問(wèn)題的方案主要有兩種：
① CORS（主流的解決方案，推薦使用）
② JSONP（有缺陷的解決方案：只支持 GET 請(qǐng)求）
2. 使用 cors 中間件解決跨域問(wèn)題
cors 是 Express 的一個(gè)第三方中間件。通過(guò)安裝和配置 cors 中間件，可以很方便地解決跨域問(wèn)題。
使用步驟分為如下 3 步：
① 運(yùn)行 npm install cors 安裝中間件
② 使用 const cors = require(‘cors’) 導(dǎo)入中間件
③ 在路由之前調(diào)用 app.use(cors()) 配置中間件
// 導(dǎo)入 express
const express = require('express')
// 創(chuàng)建服務(wù)器實(shí)例
const app = express()
// 配置解析表單數(shù)據(jù)的中間件
app.use(express.urlencoded({ extended: false }))
// 必須在配置 cors 中間件之前，配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
// TODO: 定義 JSONP 接口具體的實(shí)現(xiàn)過(guò)程
// 1. 得到函數(shù)的名稱
const funcName = req.query.callback
// 2. 定義要發(fā)送到客戶端的數(shù)據(jù)對(duì)象
const data = { name: 'zs', age: 22 }
// 3. 拼接出一個(gè)函數(shù)的調(diào)用
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4. 把拼接的字符串，響應(yīng)給客戶端
res.send(scriptStr)
})
// 一定要在路由之前，配置 cors 這個(gè)中間件，從而解決接口跨域的問(wèn)題
const cors = require('cors')
app.use(cors())
// 導(dǎo)入路由模塊
const router = require('./16.apiRouter')
// 把路由模塊，注冊(cè)到 app 上
app.use('/api', router)
// 啟動(dòng)服務(wù)器
app.listen(80, () => {
console.log('express server running at http://127.0.0.1')
})//apiRouter.js
const express = require('express')
const router = express.Router()
// 在這里掛載對(duì)應(yīng)的路由
router.get('/get', (req, res) => {
// 通過(guò) req.query 獲取客戶端通過(guò)查詢字符串，發(fā)送到服務(wù)器的數(shù)據(jù)
const query = req.query
// 調(diào)用 res.send() 方法，向客戶端響應(yīng)處理的結(jié)果
res.send({
status: 0, // 0 表示處理成功，1 表示處理失敗
msg: 'GET 請(qǐng)求成功！', // 狀態(tài)的描述
data: query, // 需要響應(yīng)給客戶端的數(shù)據(jù)
})
})
// 定義 POST 接口
router.post('/post', (req, res) => {
// 通過(guò) req.body 獲取請(qǐng)求體中包含的 url-encoded 格式的數(shù)據(jù)
const body = req.body
// 調(diào)用 res.send() 方法，向客戶端響應(yīng)結(jié)果
res.send({
status: 0,
msg: 'POST 請(qǐng)求成功！',
data: body,
})
})
// 定義 DELETE 接口
router.delete('/delete', (req, res) => {
res.send({
status: 0,
msg: 'DELETE請(qǐng)求成功',
})
})
module.exports = router
什么是 CORS
CORS （Cross-Origin Resource Sharing，跨域資源共享）由一系列 HTTP 響應(yīng)頭組成，這些 HTTP 響應(yīng)頭決定
瀏覽器是否阻止前端 JS 代碼跨域獲取資源。
瀏覽器的同源安全策略默認(rèn)會(huì)阻止網(wǎng)頁(yè)“跨域”獲取資源。但如果接口服務(wù)器配置了 CORS 相關(guān)的 HTTP 響應(yīng)頭，
就可以解除瀏覽器端的跨域訪問(wèn)限制。
CORS 的注意事項(xiàng)
① CORS 主要在服務(wù)器端進(jìn)行配置。客戶端瀏覽器無(wú)須做任何額外的配置，即可請(qǐng)求開啟了 CORS 的接口。
② CORS 在瀏覽器中有兼容性。只有支持 XMLHttpRequest Level2 的瀏覽器，才能正常訪問(wèn)開啟了 CORS 的服
務(wù)端接口（例如：IE10+、Chrome4+、FireFox3.5+）。
CORS 響應(yīng)頭部 - Access-Control-Allow-Origin
響應(yīng)頭部中可以攜帶一個(gè) Access-Control-Allow-Origin 字段，其語(yǔ)法如下:
其中，origin 參數(shù)的值指定了允許訪問(wèn)該資源的外域 URL。
例如，下面的字段值將只允許來(lái)自 http://itcast.cn 的請(qǐng)求：
如果指定了 Access-Control-Allow-Origin 字段的值為通配符 *****，表示允許來(lái)自任何域的請(qǐng)求，示例代碼如下：
CORS 響應(yīng)頭部 - Access-Control-Allow-Headers
默認(rèn)情況下，CORS 僅支持客戶端向服務(wù)器發(fā)送如下的 9 個(gè)請(qǐng)求頭：
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、
Content-Type （值僅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一）
如果客戶端向服務(wù)器發(fā)送了額外的請(qǐng)求頭信息，則需要在服務(wù)器端，通過(guò) Access-Control-Allow-Headers 對(duì)額外的請(qǐng)求頭進(jìn)行聲明，否則這次請(qǐng)求會(huì)失敗
CORS 響應(yīng)頭部 - Access-Control-Allow-Methods
默認(rèn)情況下，CORS 僅支持客戶端發(fā)起 GET、POST、HEAD 請(qǐng)求。
如果客戶端希望通過(guò) PUT、DELETE 等方式請(qǐng)求服務(wù)器的資源，則需要在服務(wù)器端，通過(guò) Access-Control-Alow-Methods來(lái)指明實(shí)際請(qǐng)求所允許使用的 HTTP 方法。
示例代碼如下
CORS請(qǐng)求的分類
客戶端在請(qǐng)求 CORS 接口時(shí)，根據(jù)請(qǐng)求方式和請(qǐng)求頭的不同，可以將 CORS 的請(qǐng)求分為兩大類，分別是：
① 簡(jiǎn)單請(qǐng)求
② 預(yù)檢請(qǐng)求
簡(jiǎn)單請(qǐng)求
同時(shí)滿足以下兩大條件的請(qǐng)求，就屬于簡(jiǎn)單請(qǐng)求：
① 請(qǐng)求方式：GET、POST、HEAD 三者之一
② HTTP 頭部信息不超過(guò)以下幾種字段：無(wú)自定義頭部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三個(gè)值application/x-www-form urlencoded、multipart/form-data、text/plain）
預(yù)檢請(qǐng)求
只要符合以下任何一個(gè)條件的請(qǐng)求，都需要進(jìn)行預(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ù)檢，以獲知服務(wù)器是否允許該實(shí)際請(qǐng)求，所以這一次的 OPTION 請(qǐng)求稱為“預(yù)檢請(qǐng)求”。服務(wù)器成功響應(yīng)預(yù)檢請(qǐng)求后，才會(huì)發(fā)送真正的請(qǐng)求，并且攜帶真實(shí)數(shù)據(jù)。
簡(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 的概念與特點(diǎn)
概念：瀏覽器端通過(guò) 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)樗鼪](méi)有使用 XMLHttpRequest 這個(gè)對(duì)象。
② JSONP 僅支持 GET 請(qǐng)求，不支持 POST、PUT、DELETE 等請(qǐng)求。
創(chuàng)建 JSONP 接口的注意事項(xiàng)
如果項(xiàng)目中已經(jīng)配置了 CORS 跨域資源共享，為了防止沖突，必須在配置 CORS 中間件之前聲明 JSONP 的接口。否則JSONP 接口會(huì)被處理成開啟了 CORS 的接口。示例代碼如下：
實(shí)現(xiàn) JSONP 接口的步驟
① 獲取客戶端發(fā)送過(guò)來(lái)的回調(diào)函數(shù)的名字
② 得到要通過(guò) JSONP 形式發(fā)送給客戶端的數(shù)據(jù)
③ 根據(jù)前兩步得到的數(shù)據(jù)，拼接出一個(gè)函數(shù)調(diào)用的字符串
④ 把上一步拼接得到的字符串，響應(yīng)給客戶端的 script標(biāo)簽進(jìn)行解析執(zhí)行
實(shí)現(xiàn) JSONP 接口的具體代碼
// 必須在配置 cors 中間件之前，配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
// TODO: 定義 JSONP 接口具體的實(shí)現(xiàn)過(guò)程
// 1. 得到函數(shù)的名稱
const funcName = req.query.callback
// 2. 定義要發(fā)送到客戶端的數(shù)據(jù)對(duì)象
const data = { name: 'zs', age: 22 }
// 3. 拼接出一個(gè)函數(shù)的調(diào)用
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4. 把拼接的字符串，響應(yīng)給客戶端
res.send(scriptStr)
})在網(wǎng)頁(yè)中使用 jQuery 發(fā)起 JSONP 請(qǐng)求
調(diào)用 $.ajax() 函數(shù)，提供 JSONP 的配置選項(xiàng)，從而發(fā)起 JSONP 請(qǐng)求，示例代碼如下：
// 為 JSONP 按鈕綁定點(diǎn)擊事件處理函數(shù)
$('#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)于NodeJs Express框架實(shí)現(xiàn)服務(wù)器接口詳解的文章就介紹到這了,更多相關(guān)NodeJs Express 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
node.js Sequelize實(shí)現(xiàn)單實(shí)例字段或批量自增、自減
Sequelize 可以實(shí)現(xiàn)針對(duì)單個(gè)實(shí)例的一或多個(gè)字段的自增、自減操作，也可以對(duì)符合條件的數(shù)據(jù)進(jìn)行批量的自增、自減操作。單個(gè)實(shí)例字段的自增、自減可以利用Instance的相應(yīng)方法實(shí)現(xiàn)，而批量自增、自減則需要借助sequelize提供的字面量方法實(shí)現(xiàn)。下面來(lái)看看詳細(xì)的介紹吧。2016-12-12
NPM配置私服構(gòu)建內(nèi)網(wǎng)中央倉(cāng)庫(kù)過(guò)程詳解
這篇文章主要為大家介紹了NPM配置私服構(gòu)建內(nèi)網(wǎng)中央倉(cāng)庫(kù)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
如果你在處理應(yīng)用中 I/O 相關(guān)的操作，你可以利用 Node.js 中的流(stream)，這篇文章主要為大家詳細(xì)介紹了Node.js Streams文件讀寫操作，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了Node.js控制器Controller使用教程，一個(gè)控制器的目的是接收應(yīng)用程序的特定請(qǐng)求。路由機(jī)制控制哪個(gè)控制器接收哪些請(qǐng)求。通常，每個(gè)控制器有一個(gè)以上的路由，不同的路由可以執(zhí)行不同的動(dòng)作2023-04-04
Linux系統(tǒng)中利用node.js提取Word(doc/docx)及PDF文本的內(nèi)容
這篇文章主要給大家介紹了關(guān)于Linux系統(tǒng)中利用node.js提取Word(doc/docx)及PDF文本的內(nèi)容，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-06-06
Node.js實(shí)現(xiàn)修改文件字符集功能的具體過(guò)程
在日常生活、工作中,我們經(jīng)常會(huì)遇到需要處理不同編碼格式的文件,有時(shí),在嘗試打開這些文件時(shí)會(huì)遇到亂碼,原因通常是文件的編碼與我們使用的文本編輯器或編程語(yǔ)言的默認(rèn)編碼不匹配,這篇文章將介紹Node.js修改文件字符集的實(shí)現(xiàn)思路和具體實(shí)現(xiàn)過(guò)程2024-08-08
Vue+Node實(shí)現(xiàn)的商城用戶管理功能示例
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)的商城用戶管理功能,結(jié)合實(shí)例形式詳細(xì)分析了商城用戶管理的前臺(tái)登錄、校驗(yàn)、跳轉(zhuǎn)、退出等相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了node+vue實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
node實(shí)現(xiàn)將json轉(zhuǎn)為excel
平時(shí)我們寫代碼處理的數(shù)據(jù)格式一般都是json格式的數(shù)據(jù),但有時(shí)候我們也需要將數(shù)據(jù)轉(zhuǎn)為excel格式進(jìn)行保存或分享,所以下面我們就來(lái)學(xué)習(xí)一下如何通過(guò)node實(shí)現(xiàn)json轉(zhuǎn)excel吧2024-11-11
深入理解Node.js中CORS的三個(gè)重要響應(yīng)頭
CORS是一種安全機(jī)制,通過(guò)配置適當(dāng)?shù)捻憫?yīng)頭,服務(wù)器可以允許或限制外部域?qū)Y源的訪問(wèn),本文主要介紹了Node.js中CORS的三個(gè)重要響應(yīng)頭,感興趣的可以了解一下2024-12-12