Node.js基础---使用Express写接口

1. 创建基本的服务器

        

2. 创建 API 路由模块

// aoiRouter.js 路由模块
const express = require('express')
const apiRouter = express.Router()module.exports = apiRouter// ------------------------------------------// app.js 导入并注册路由模块
const apiRouter = require('./apiRouter.js')
app.use('/api', apiRouter)

3. 编写 GET 接口

apiRouter.get('/get', (req, res) => {// 获取客户端通过查询字符串发送到服务器的数据const query = req.query//  调用 res.send() 方法 把数据响应给客户端res.send({status: 0, //  0成功 1失败message: 'success',data: query    // 响应的具体数据})
})

4. 编写 POST 请求

apiRouter.post('/post', (req, res) => {// 获取客户端通过查询字符串发送到服务器的数据const body= req.body//  调用 res.send() 方法 把数据响应给客户端res.send({status: 0, //  0成功 1失败message: 'success',data: body// 响应的具体数据})
})

        注意:要获取 URL-encoded 格式的请求体数据,必须配置中间件 app.use(express.urlencoded({ extended: false }))

5. CORS 跨域资源共享

1. 接口的跨域问题

        上面的 get 和 post 请求都不支持跨域请求

        解决方法两种:

                ①   CORS (主流的解决方案,推荐)

                ②   JSONP (有缺陷的解决方法:只支持 GET 请求)

2. 使用 cors 中间件解决跨域问题

        cors 是 Express 的第三方中间件

        使用步骤:

                ①   运行 npm i cors 安装中间件

                ②   使用 const cors = require(‘cors’)导入中间件

                ③   在路由前调用 app.use(cors())

3. 什么是 cors

        CORS(跨域资源共享),由一系列 HTTP 响应头 组成,这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源

        浏览器的同源安全策略默认会阻止网页 “跨域” 获取资源。如果接口服务器配置了 CORS 相关的 HTTP 响应头,就可以解除浏览器的跨域访问限制。

        

4. CORS 的注意事项

        ①   CORS 主要在服务端进行配置。客户端浏览器无需额外配置即可请求开启CORS的接口

        ②   CORS 在浏览器有兼容性,只有支持 XML HttpRequest Level2 的浏览器才能正常访问开启了 CORS 的服务端接口(例如:IE10+、Chrome4+、FireFox3.5+)

5. CORS 响应头部 - Access-Control-Allow-Origin

        响应头部中可以携带一个 Access-Control-Allow-Origin 字段,语法如下:

Access-Control-Allow-Origin: <origon> | *

        其中,origin 参数的值指定了 允许访问该资源的外域 URL

        例如,下面的字段值只允许来自 http://abcde.cn 的请求

res.setHeader('Access-Control-Allow-Origin', 'http://abcde.cn')

        如果指定了 Access-Control-Allow-Origin 字段的值为通配符 * 表示允许来自任何域的请求

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

6. CORS 响应头部 - Access-Control-Allow-Headers

        默认情况下、CORS 仅支持客户端向服务器发送如下的9个请求头

        Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-type

        Content-type(值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

        如果客户端向服务器发送了额外的请求头信息、则需要在服务器端,通过 Access-Control-Allow-Headers 对额外的请求头进行申明,否则这次的请求会失败

// 允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
// 注意: 多个请求头之间用英文的逗号进行分割
res.setHeader('Access-Control-Allow-Headers','Content-Type, X-Custom-Header')

7. CORS 响应头部 - Access-Control-Allow-Methods

        默认情况下,CORS仅支持客户端发起的 GET、POST、HEAD 请求

        如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过Access-Control-Allow-Methods 来指明实际请求所允许使用的 HTTP 方法

// 只允许 POST、GET、DELETE、HEAD 请求方式
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')
// 允许所有的 HTTP 请求方式
res.setHeader('Access-Control-Allow-Methods', '*')

8. CORS 请求的分类

        客户端在请求 CORS 接口时,根据请求方式和请求头的不同,可以将 CORS 的请求分为两大类,分别是

        ①   简单请求

        ②   预检请求

9. 简单请求

        同时满足以下两大条件的就是简单请求

        ①   请求方式:GET、POST、HEAD 三者之一

        ②   HTTP头部信息不超过一下几种字段:无自定义头部字段Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-type(值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

10. 预检请求

        符合以下任何一个条件的都需要进行预检请求

        ①   请求方式为GET、POST、HEAD 之外的请求 Method 类型

        ②   请求头中包含自定义头部字段

        ③   向服务器发送了 application/json 格式的数据

        在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一次的 OPTION 请求被称为 “预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据

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

        简单请求的特点:客户端与服务器之间只会发生一次请求

        预检请求的特点:客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鼠标在QTreeView、QTableView、QTableWidget项上移动,背景色改变

目录 1. 前言 2. 需求 3. 功能实现 3.1. 代码实现 3.2. 功能讲解 4. 附录 1. 前言 本博文用到了Qt的model/view framework框架,如果对Qt的“模型/视图/委托”框架不懂&#xff0c;本博文很难读懂。如果不懂这方面的知识&#xff0c;请在Qt Assistant 中输入Model/View…

抖音小店怎么选品?选品的三种方法分享,新手就能用!

大家好&#xff0c;我是电商糖果 什么样的产品在抖音卖的好&#xff1f; 什么样的产品容易爆单&#xff1f; 什么样的产品售后少&#xff1f; 等等等等 这是不是很少新手商家在选品的时候&#xff0c;最好奇的问题。 尤其是一些从没接触过电商的朋友。 抖音小店怎么选品…

力扣大厂热门面试算法题 15-17

15. 三数之和&#xff0c;16. 最接近的三数之和&#xff0c;17. 电话号码的字母组合&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.11 可通过leetcode所有测试用例。 目录 15. 三数之和 解题思路 完整代码 Java Python ​…

AtomicInteger原理

文章目录 AtomicInteger原理原理介绍源码分析 AtomicInteger原理 原理介绍 AtomicInteger的本质&#xff1a;自旋锁 CAS算法 自旋锁&#xff1a;当一个线程在获取锁时&#xff0c;如果锁已经被其他线程获取&#xff0c;当前线程就会不断循环检查锁是否被释放&#xff0c;直…

Ubuntu 24.04 抢先体验换国内源 清华源 阿里源 中科大源 163源

Update 240307:Ubuntu 24.04 LTS 进入功能冻结期 预计4月25日正式发布。 Ubuntu22.04换源 Ubuntu 24.04重要升级daily版本下载换源步骤 (阿里源)清华源中科大源网易163源 Ubuntu 24.04 LTS&#xff0c;代号 「Noble Numbat」&#xff0c;即将与我们见面&#xff01; Canonica…

Linux每日练习day3

创建1个f开头的文件夹&#xff0c;2个f开头的普通文件 1、输出文件名时&#xff0c;每个文件名前加一个前缀abc find -name f* -exec echo abc {} \; abc ./fly abc ./fir abc ./fty2、输出所有文件名时&#xff0c;在行头加一个前缀 aaa find -name f* |xargs echo aaa aaa ./…

vue provide 与 inject使用

在vue项目中&#xff0c;如果遇到跨组件多层次传值的话&#xff0c;一般会用到vuex&#xff0c;或者其他第三方共享状态管理模式&#xff0c;如pinia等&#xff0c;但是对于父组件与多层次孙子组件时&#xff0c;建议使用provide 与 inject&#xff0c;与之其他方式相比&#x…

如何使用Everything+cpolar实现公网远程搜索下载内网储存文件资料

文章目录 前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 前言 要搭建一个在线资料库&#xff0c;我们需要两个软件的支持&#xff0c;分别是cpolar&#xff08;用于搭建内网穿透数据隧道…

高分1、2号卫星原始遥感影像数据

高分一号 高分一号卫高分一号卫星是中国高分辨率对地观测系统的首发星&#xff0c;突破了高空间分辨率、多光谱与宽覆盖相结合的光学遥感等关键技术&#xff0c;设计寿命5至8年。 高分辨率对地观测系统工程是《国家中长期科学和技术发展规划纲要(2006&#xff5e;2020年)》确定…

StarRocks实战——欢聚集团极速的数据分析能力

目录 一、大数据平台架构 二、OLAP选型及改进 三、StarRocks 经验沉淀 3.1 资源隔离&#xff0c;助力业务推广 3.1.1 面临的挑战 3.1.2 整体效果 3.2 稳定优先&#xff0c;监控先行&#xff0c;优化运维 3.3降低门槛&#xff0c;不折腾用户 3.3.1 与现有的平台做打通 …

前端框架的发展史可以追溯到早期的静态网页时代

前端框架的发展史可以追溯到早期的静态网页时代。以下是前端框架的主要发展阶段&#xff1a; 静态网页时代&#xff1a;在互联网的初期&#xff0c;网页主要由HTML、CSS和JavaScript构成。这些网页是静态的&#xff0c;没有复杂的交互和动态内容。 原生JavaScript时代&#xf…

LeetCode刷题--- 环绕字符串中唯一的子字符串

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动态规划算法…

分库分表浅析原理

数据库存放数据大了&#xff0c;查询等操作就会存在瓶颈&#xff0c;怎么办&#xff1f; 1. 如果是单张表数据大了&#xff0c;可以在原有库上新建几张表table_0、table_1、table_2、.....table_n 写程序对数据进行分表&#xff1a; --这里提供一种一种分表策略,这里只需维护…

容器安全是什么?

容器安全定义 容器安全是指保护容器的完整性。这包括从其保管的应用到其所依赖的基础架构等全部内容。容器安全需要完整且持续。通常而言&#xff0c;企业拥有持续的容器安全涵盖两方面&#xff1a; 保护容器流水线和应用保护容器部署环境和基础架构 如何将安全内置于容器流…

模板方法模式在交易策略开发中的应用

文章目录 一、模板方法模式的特点和优点二、交易策略开发的常见模板方法三、模板方法模式在交易策略应用方面四、模板方法模式开发交易策略的代码 一、模板方法模式的特点和优点 特点 模板方法模式是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步…

Java开发从入门到精通(一):Java的基础语法项目案例

Java大数据开发和安全开发 Java 案例练习案例一:买飞机票案例二:开发验证码案例三:评委打分案例四:数字加密案例五:数组拷贝案例六: 抢红包案例七:找素数案例八:模拟双色球[拓展案例] Java 案例练习 案例一:买飞机票 分析: 方法是需要接收数据?需要接收机票原价、当前月份、舱…

新手如何快速上手学习单片机?

读者朋友能容我&#xff0c;不使博文负真心 新开专栏&#xff0c;期待与诸君共享精彩 个人主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《单片机》 学习单片机是一个有趣且有挑战性的过程。单片机是一种微控制器&#xff0c;广泛应用于各种电子设备和嵌入式系统中。在这…

IOS面试题object-c 61-70

61. 阐述isKindOfClass、isMemberOfClass、selector作用分别是什么&#xff1f;isKindOfClass&#xff1a;作用是某个对象属于某个类型或者继承自某类型。 isMemberOfClass&#xff1a;某个对象确切属于某个类型。 selector&#xff1a;通过方法名&#xff0c;获取在内存中的函…

Linux 驱动 | 高级驱动 | I2C子系统

Linux 驱动 | 高级驱动 | I2C子系统 学习笔记 主要内容: 1,i2c协议和时序 2,i2c子系统软件框架 3,i2c从设备驱动编写方式–不考虑具体的硬件 4,mpu6050硬件连接,陀螺仪和加速度工作原理,它们的应用 5,mpu6050数据和获取 6,mpu6050从设备驱动编写 I2C驱动开发: I2C…

#QT(本地音乐播放器)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;之前做的音乐播放器只做了一个界面&#xff0c;是因为跟的课程发现到后面需要付费&#xff0c;并且WINGW6.2.0运行QMediaPlayer时无法运行&#xff0c;会崩溃&#xff0c;现在退一步用WINGW5.12.2做一个本地音乐播放器 3.记录&am…