Node.js-----使用express写接口

使用express写接口

文章目录

    • 使用express写接口
          • 创建基本的服务器
          • 创建API路由模块
          • 编写GET接口
          • 编写POST接口
          • CROS跨域资源共享
            • 1.接口的跨域问题
            • 2.使用cros中间件拒绝跨域问题
            • 3.什么是cros
            • 4.cros的注意事项
            • 5.cros请求的分类
          • JSONP接口
            • 1.回顾jsonp的概念和特点
            • 2.创建jsonp接口的注意事项
            • 3.实现JSONP接口的步骤
            • 4.实现JSONP接口的具体代码
            • 5.在网页在使用jq发起jsonp请求

创建基本的服务器
//导入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响应头

就可以接触浏览器端的跨域访问限制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vd2X2S7M-1678788705770)(C:\Users\22519\AppData\Roaming\Typora\typora-user-images\image-20230314172333642.png)]

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);
        },
    });
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/108.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

请相信总有一扇门为你而开——社科院与杜兰大学金融管理硕士项目

考研人数每年都在递增&#xff0c;考研的竞争压力也逐年增长。考研话题也备受人们关注&#xff0c;初试&#xff0c;国家线&#xff0c;复试&#xff0c;考研的每一个关卡都会冲上热搜&#xff0c;引发热议。国家线公布后&#xff0c;有人欢喜有人忧。祝福成功上岸的学子们&…

【Leetcode——排序的循环链表】

&#x1f60a;&#x1f60a;&#x1f60a; 文章目录一、力扣题之排序循环链表二、解题思路1. 使用双指针法2、找出最大节点&#xff0c;最大节点的下一个节点是最小节点&#xff0c;由此展开讨论总结一、力扣题之排序循环链表 题目如下&#xff1a;航班直达&#xff01;&#…

有什么比较好的bug管理工具?5款热门工具推荐

工具再优秀&#xff0c;适合自己才最重要。 为尽量讲透这个问题&#xff0c;本文的行文结构我先整理如下&#xff1a; 1、为什么需要bug管理工具&#xff1f; 2、好的bug管理工具的标准是什么&#xff1f; 3、好的bug管理工具推荐&#xff08;5款&#xff09; 4、如何挑选适合…

雪花算法(SnowFlake)

简介现在的服务基本是分布式、微服务形式的&#xff0c;而且大数据量也导致分库分表的产生&#xff0c;对于水平分表就需要保证表中 id 的全局唯一性。对于 MySQL 而言&#xff0c;一个表中的主键 id 一般使用自增的方式&#xff0c;但是如果进行水平分表之后&#xff0c;多个表…

【python实操】用python写软件弹窗

文章目录前言组件label 与 多行文本复选框组件Radiobutton单选组件Frame框架组件labelframe标签框架列表框Listboxscrollbar滚动条组件scale刻度条组件spinbox组件Toplevel子窗体组件PanedWindow组件Menu下拉菜单弹出菜单总结针对组件前言 python学习之路任重而道远&#xff0…

chatgpt这么火?前端如何实现类似chatgpt的对话页面

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;…

代码看不懂?ChatGPT 帮你解释,详细到爆!

偷个懒&#xff0c;用ChatGPT 帮我写段生物信息代码如果 ChatGPT 给出的的代码不太完善&#xff0c;如何请他一步步改好&#xff1f;网上看到一段代码&#xff0c;不知道是什么含义&#xff1f;输入 ChatGPT 帮我们解释下。生信宝典 1: 下面是一段 Linux 代码&#xff0c;请帮…

Linux命令之nano命令

一、nano命令简介 nano是一个小型、免费、友好的编辑器&#xff0c;旨在取代非免费Pine包中的默认编辑器Pico。nano不仅复制了Pico的外观&#xff0c;还实现了Pico中一些缺失&#xff08;或默认禁用&#xff09;的功能&#xff0c;例如“搜索和替换”和“转到行号和列号”。nan…

【面试题】如何避免使用过多的 if else?

大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库一、引言相信大家听说过回调地狱——回调函数层层嵌套&#xff0c;极大降低代码可读性。其实&#xff0c;if-else层层嵌套&#xff0c;如下图…

iOS-砸壳篇(两种砸壳方式)

CrackerXI砸壳呢&#xff0c;当时你要是使用 frida-ios-dump 也是可以的&#xff1b; https://github.com/AloneMonkey/frida-ios-dump frida-ios-dump: 代码中需要更改的&#xff1a;手机中的内网ip 密码 等 最后放到我的砸壳路径里&#xff1a; python dump.py -l查看应用…

【答疑现场】我一个搞嵌入式的,有必要学习Python吗?

【答疑现场】我一个搞嵌入式的&#xff0c;有必要学习Python吗&#xff1f; 文章目录1 写在前面2 一个结论3 Python在嵌入式领域能干啥事4 Python是用来干大事的5 友情推荐6 福利活动大家好&#xff0c;我是架构师李肯&#xff0c;一个专注于嵌入式物联网系统架构设计的攻城狮。…

【蓝桥杯嵌入式】ADC模数转换的原理图解析与代码实现(以第十一届省赛为例)——STM32G4

&#x1f38a;【蓝桥杯嵌入式】专题正在持续更新中&#xff0c;原理图解析✨&#xff0c;各模块分析✨以及历年真题讲解✨都在这儿哦&#xff0c;欢迎大家前往订阅本专题&#xff0c;获取更多详细信息哦&#x1f38f;&#x1f38f;&#x1f38f; &#x1fa94;本系列专栏 - 蓝…

Linux--多线程(1)

目录 一、概念 二、理解 三、创建、退出、合并进程 //man pthread_create //Compile and link with -pthread. //1.为什么没有fun函数&#xff1f; //2.加上sleep来改进 //3.线程结束会不会影响主线程运行&#xff1f; //4.那如果主线程比较少呢&#xff1f; 四、如何…

IP协议+以太网协议

在计算机网络体系结构的五层协议中&#xff0c;第三层就是负责建立网络连接&#xff0c;同时为上层提供服务的一层&#xff0c;网络层协议主要负责两件事&#xff1a;即地址管理和路由选择&#xff0c;下面就网络层的重点协议做简单介绍~~ IP协议 网际协议IP是TCP/IP体系中两…

RecyclerView流程学习

RecyclerView流程学习模块划分绘制流程onMeasuremLayout为nullmLayout开启自动测量未开启自动测量onLayoutonDrawonLayoutChildren缓存预加载滚动和fling模块划分 RecyclerView中根据其功能可以分为以下几个模块&#xff1a; Recycler mRecycler // 缓存管理者&#xff0c;fi…

yolov5的基本配置

yolov5的基本配置train.pydata.yaml数据集标签文件格式:总结train.py def parse_opt(knownFalse):parser argparse.ArgumentParser()parser.add_argument(--weights, typestr, defaultROOT / yolov5s.pt, helpinitial weights path)parser.add_argument(--cfg, typestr, defau…

uniCloud在线升级APP配置教程

app在线升级背景实现思路流程流程背景 因用户需要添加手机h5页面来进数据操作实现思路流程 实现流程图流程 相关文档&#xff1a;帮助文档 https://uniapp.dcloud.net.cn/uniCloud/cf-functions.html 注册服务空间 https://unicloud.dcloud.net.cn/pages/login/login uni升级…

基于Yolv5s的口罩检测

1.Yolov5算法原理和网络结构 YOLOv5按照网络深度和网络宽度的大小&#xff0c;可以分为YO-LOv5s、YOLOv5m、YOLOv5l、YOLOv5x。本文使用YOLOv5s&#xff0c;它的网络结构最为小巧&#xff0c;同时图像推理速度最快达0.007s。YO-LOv5的网络结构主要由四部分组成&#xff0c;分别…

三天吃透MySQL八股文(2023最新整理)

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…

博客系统(界面设计)

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录实现博客列表页预期效果导航栏页面主体左右布局左侧区域右侧区域完整代码实现博客详情页预期效果导航栏 左侧右侧完整代码实现…
最新文章