这篇文章主要讲解了“Node.js怎么使用express写接口”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Node.js怎么使用express写接口”吧!
创建基本的服务器
//导入express模块 const express =require('rexpress') //创建express的服务器实例 const app=express() .... //调用app.listen方法 ,指定端口号并启动web服务器 app.listen(80,function(){ console.log('server running at http://127.0.0.1'); })
创建API路由模块
// apiRouter.js var express=require('express') //导入express var apiRouter=express.Router() //创建路由对象 module.exports=router //向外导出对象 //app.js const apiRouter=require('./apiRouter') app.use('api',apiRouter)
编写GET接口
apiRouter.get('/get',(req,res)=>{ //1.获取到客户端通过查询字符串,发送到服务器的数据 const query=req.query //2.调用res.send()方法 ,把数据响应给客户端 res.send({ status:0, //状态,0表示成功 1表示失败 msg:'GET请求成功, // 状态描述 data:query //需要响应给客户端的数据 }) })
编写POST接口
apiRouter.post('/post',(req,res)=>{ //1.获取到客户端通过查询字符串,发送到服务器的数据 const body=req.body //2.调用res.send()方法 ,把数据响应给客户端 res.send({ status:0, //状态,0表示成功 1表示失败 msg:'POST请求成功, // 状态描述 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主要在服务器端进行配置。客户端浏览器无需做任何额外的配置,即可请求开启了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类型
请求头在包含自定义头部字段
向服务器发送了application/json格式的数据
在浏览器与服务器正式通信之前,浏览器会发送OPTION请求进行预检,以获取浏览器是否允许该实际请求,所以这一次的OPTION请求为“预检请求”,服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据
6.简单请求和预检请求的区别
简单请求的特点: 客户端与服务器之间只会发生一次请求。
预检请求的特点: 客户端与服务器之间会发生两次请求,OPTION预检请求成功之后,才会发起真正的请求。
JSONP接口
1.回顾jsonp的概念和特点
概念 :浏览器通过/
特点:
JSONP不属于真正的ajax请求,因为它没有使用XMLHttpRequest这个对象
JSONP仅支持GET请求,不支持POST,PUT,DELETE等请求
2.创建jsonp接口的注意事项
如果项目中已经配置了CROS的跨域资源共享,为了防止冲突,必须在配置CROS中间件之前声明JSONP的接口,否则JSONP接口会被处理成开启了CROS的接口
3.实现JSONP接口的步骤
获取客户端的发送过来的回调函数的名字
得到要通过JSONP形式发送给客户端的数据 JSON.stringify()
根据前面两走的到的数据,拼接出一个函数调用的字符串
把上一步拼接得到的字符串,响应给客户端的/
4.实现JSONP接口的具体代码
app.get('/api/jsonp',(req,res)=>{ //获取客户端发送过来的回调函数的名字 const funcName=req.query.callback //得到要通过JSONP形式发送给客户端的数据 const data={name:'zs',age:22} //根据前面两步得到的数据,拼接一个函数调用的字符串 const scriptStr=`${funcName}(${JSON.stringify(data)})` //把上一步得到的拼接字符串,响应给客户端的<script>标签进行解析 res.send(scriptStr) })
5.在网页在使用jq发起jsonp请求
调用$.ajax(),提供JSONP的配置请求,从而发起JSONP请求
$("#btnJSONP").on("click", function () { $.ajax({ type: "GET", url: "http://127.0.0.1/api/jsonp", dataType: "jsonp", success: function (res) { console.log(res); }, }); });