路由模塊示例败许,及引用:
編寫GET接口
const express = require('express');
const router= express.Router();
router.get("/get",(req,res)=>{
// 通過(guò) req.query 獲取客戶端通過(guò)查詢字符串,發(fā)送到服務(wù)器的數(shù)據(jù)
const query = req.query;
res.send({
status:0,
msg:'get 請(qǐng)求成功',
data:query
});
})
編寫POST接口
const express = require("express");
const router = express.Router();
router.post((req,res)=>{
// 通過(guò) req.body 獲取請(qǐng)求體中包含的 url-encoded 格式的數(shù)據(jù)
const body = req.body
res.send({
status:0,
msg:"成功",
data:body
})
});
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()) 配置中間件
3 3. 什么是 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)限制
3.4 跨域cors相關(guān)的三個(gè)響應(yīng)頭
1 CORS 響應(yīng)頭部 - Access-Control-Allow-Origin
響應(yīng)頭部中可以攜帶一個(gè) Access-Control-Allow-Origin 字段,其語(yǔ)法如下:
Access-Control-Allow-Origin:<origin>|*
//例如,下面的字段值將只允許來(lái)自 http://itcast.cn 的請(qǐng)求:
res.setHeader("Access-Control-Allow-Origin","http://itcast.cn");
//如果指定了 Access-Control-Allow-Origin 字段的值為通配符 *秀撇,表示允許來(lái)自任何域的請(qǐng)求超棺,示例代碼如下:
res.setHeader("Access-Control-Allow-Origin","*");
2 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ì)失敗辩稽!
// 允許客戶端額外向服務(wù)器發(fā)送:content-type,X-Custom-Header請(qǐng)求頭
// 注意:多個(gè)請(qǐng)求頭用逗號(hào)分開(kāi)
res.setHeader("Access-Control-Allow-Headers","content-type,X-Custom-Header");
3 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 方法。
// 只允許post get head delete方法
res.setHeader("Access-Control-Allow-Methods",'POST,GET,HEAD,DELETE')
// 允許所有的http請(qǐng)求
res.setHeader("Access-Control-Allow-Methods",'*')