Node.js(五)——编写接口

一、创建基本的服务器和API模块

1.基本的服务

复制代码
const express=require('express')


const app=express()


const router=require('./jiekou.js')

app.use('/api',router)//加一个统一的前缀 /api

app.listen('80',()=>{
  console.log('80端口已开启')
})

2.API路由模块

复制代码
const express=require('express')
const apiRouter=express.Router()
// 这里挂载对应的路由



module.exports=apiRouter

前端的路由是用来切换页面的,后端的路由是用来返回数据的,像里面的/user是路径,但是那一小堆就是路由

二、编写GET接口

复制代码
const express=require('express')
const apiRouter=express.Router()
// 这里挂载对应的路由


apiRouter.get('/userInfo',(req,res)=>{
  console.log(req.query)

  res.send({
    status:0,
    msg:'GET success!',
    data:req.query
  })
})

module.exports=apiRouter

三、编写POST接口

post传的参数是放在body里的,get参数师放在query里的

如果是body里的数据我们不能直接用req.body来直接拿到(大部分情况),需要配置一个中间件

POST 传参方式 请求头 Content-Type 是否需要中间件 用什么中间件
JSON application/json ✅ 需要 express.json()
表单 application/x-www-form-urlencoded ✅ 需要 express.urlencoded({ extended: false })
文件上传 multipart/form-data ✅ 需要(但不是用 express 自带的) multer、formidable 等
纯文本 text/plain ❌ 不需要(但很少用) 手动处理原始数据流

而且配置的这个中间件我们只需要配置一次全局都能用,就配置在app.use所在的页面

复制代码
app.use(express.json())
app.use(express.urlencoded({extended:false}))

注意这两句引入中间件一定要写在app.use('/api',router)的前面!

第二个里面的extended,express.json里是不支持的

传false的意思就是使用 Node.js 内置的 querystring 模块,不支持嵌套对象(不能传个对象里面还套了一层对象)

四、CORS跨域

1.接口的跨域问题

跨域问题:协议、域名、端口号任一一个不同就会引起跨域问题

解决方案:

  • CORS(主流方法,推荐使用)
  • JSONP(有缺陷,只适用于get请求)

2.什么是CORS

CORS(Cross-Origin Resource Sharing,跨域资源共享),由一系列的http响应头组成,这些http响应头决定了浏览器是否阻止前端JS代码跨域获取资源。

浏览器默认的"同源策略"会阻止网页跨域获取资源,配置了CORS之后就可以解除。

注意:

  • CORS是在服务端配置的,客户浏览器无需做额外配置
  • CORS有兼容性,只支持在XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS的服务端接口(例如:IE 10+、Chrome4+、FireFox3.5+)

3.使用CORS来解决跨域问题

CORS是Express的一个中间件

使用步骤:

  1. 安装npm install cors
  2. 引入const cors=require('cors')
  3. 在路由之前app.use(cors())来配置中间件,注册为全局可用中间件

4.CORS相关的3个响应头

  • Access-Control-Allow-Origin:<origin>|*,可以是具体的某个域名,也可以是*(全部)
  • Access-Control-Allow-Headers:默认情况下,服务端允许客户端发送9个请求头

如果超过这个范围的话,就需要在Access-Control-Allow-Headers声明一下,否则会请求失败

res.setHeader('Access-Control-Allow-Headers','Content-type')

  • Access-Control-Allow-Methods:默认情况下,CORS只允许客户端发送get、post、head请求。

res.setHeader('Access-Control-Allow-Methods','PUT,DELETE')

res.setHeader('Access-Control-Allow-Methods','*')

5.CORS请求的分类

CORS的请求根据请求方式和请求头可以将请求分为两大类:

  • 简单请求:请求方式是GET、POST、HEAD之一&&头部信息不超过上面那九个范围的
  • 预检请求:请求方式超出那三个的 || 头部信息不属于那九个的 || 向服务器发送了application/json格式的数据

预检请求是浏览器与服务器正式发起请求前,浏览器会先发送OPTION请求进行预检,以获知服务器是否允许该请求,服务器响应了该预检请求之后,才会发送真正的请求,并且携带真实数据。

简单请求与预检请求的区别

简单请求:客户端与服务端直接只进行一次请求

预检请求:客户端与服务端之间会发送两次请求,预检+真正请求

6.JSONP接口

JSONP是用<script 标签里的src属性来请求服务器上的数据的,同时服务器返回一个函数的调用,这种请求方式叫JSONP。

特点:

  • 不属于Ajax请求,因为他没有使用XMLHttpRequest这个对象
  • 只支持Get请求

注意如果项目中已经配置了CORS的话,要在CORS中间件声明之前就声明JSONP的接口,否则JSONP接口会被处理成开启了CORS的接口

这个现在基本不用了就不再多介绍了

相关推荐
何何____几秒前
Vue 全局事件总线详解
前端·javascript·vue.js
涉密IT资质笔记42 分钟前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库
u0111026751 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画
事圆则缓1 小时前
Flutter 状态管理框架对比(五):GetX 的响应式、依赖注册与生命周期
前端·javascript·flutter
广州智造2 小时前
Radioss复合材料使用的单元属性
前端·设计·cad·建模·cae·radioss
张宏宇2 小时前
我把微软开源的 tgrep 做成了本地版 GitHub Code Search:45,629 个文件里搜一次 10ms
前端·后端
huakoh2 小时前
MCP 调用超时后别急着重试:三步读回分清执行状态
前端
打工仔折腾 AI2 小时前
把模型切换交给平台:用蓝耘智能路由搭建商品评论分析工具
java·服务器·前端·后端·python·性能优化·ai agent 实战
不可能片场2 小时前
Electron 发布标题的冒号 击穿命令行解析
前端·electron
500842 小时前
React Native for OpenHarmony 实战:三方库 react-native-crypto-js 的鸿蒙化适配指南
javascript·react native·性能优化·electron·harmonyos