Express学习（四）

news2025/1/16 2:06:31

使用Express写接口

创建基本的服务器

在这里插入图片描述

创建API路由模块

编写GET接口

在这里插入图片描述
在这里插入图片描述

编写POST接口

在这里插入图片描述

CORS跨域资源共享

  • 什么是CORS
    CORS由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头 ，就可以解除浏览器前端的跨域访问限制。
  • 新建一个test.html文件，在文件内输入！，点击！即可快速初始化html文件
  • 使用cors中间件解决跨域问题
  • 使用步骤如下
    • 运行npm install cors安装中间件
    • 使用const cors = require('cors')导入中间件
    • 在路由之前调用app.use(cors())配置中间件
  • 代码如下
  • API.js
//路由模块
const express = require('express')
const router = express.Router()

router.get('/get', (req, res) => {
  //获取到客户端通过查询字符串发送到服务器的数据
  const query = req.query
  //调用res.send()方法把数据响应给客户端
  res.send({
    status: 0,  //状态0表示成功，1表示失败
    msg: 'GET请求成功！',  //状态描述
    data: query    //需要响应给客户端的具体数据
  })
})

router.post('/post', (req, res) => {
  //获取客户端通过请求体发送到服务器的 URL-encoded数据
  //如果要获取URL-encoded格式的请求体数据，必须配置中间件app.use(express.urlencoded({ extended: false}))
  const body = req.body
  //调用res.send()方法把数据响应给客户端
  res.send({
    status: 0,    //状态0表示成功，1表示失败
    msg: 'POST请求成功！',  //状态描述消息
    data: body    //需要响应给客户端的具体数据
  })
})

module.exports = router
  • test.js
//导入express模块
const express = require('express')

//创建express服务器实例
const app = express()

//配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

//一定要在路由之前配置之cors这个中间件，从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())

//导入并注册路由模块
const router = require('./API')
app.use('/api', router)




//调用app.listen方法指定端口号并启动服务器
app.listen(80, () => {
  console.log('Express server running at http://127.0.0.1')
})
  • test.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

  <!--输入以下内容-->
  <button id="btnGET">GET</button>
  <button id="btnPOST">POST</button>


  <script>
    //测试GET接口
    $('#btnGET').on('click', function () {
      $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1/api/get',
        data: { name: 'zs', age: 20 },
        success: function (res) {
          console.log(res)
        },
      })
    })
    //测试POST接口
    $('#btnPOST').on('click', function () {
      $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1/api/get',
        data: { bookname: '区块链', author: 'thq' },
        success: function (res) {
          console.log(res)
        },
      })
    })
  </script>

</body>

</html>

  • 终端运行test.js文件
    在这里插入图片描述

  • 然后在网页中打开html文件

  • 点击GET和POST按钮

  • 注意事项

    • CORS主要在服务器端进行配置。客户端浏览器无需做2任何额外的配置，即可请求开启了CORS的接口。
    • CORS在六浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端接口（例如：IE10+、Chrome4+、FireFFox3.5+）

CORS响应头部

  • Access-Control-Allow-Origin
    响应头部可以携带一个Access-Control-Allow-Origin字段，如下，下面的字段值将只允许来自http://itcast.cn的请求
res.setHeader('Access-Control-Allow-Origin', 'http://itcast.cn')

下面的字段表示允许来自任何域的请求

res.setHeader('Access-Control-Allow-Origin', '*')
  • Access-Control-Allow-Headers
    默认情况下，CORS仅支持客户端向服务器发送如下的9个请求头：
    Accept、Accept-Language、 Content-Language、 DPR、DownlinkSave-Data Viewport-Width, Width Content-Type (值仅限于 text/plain、 multipart/form-data、application/x-www-form-urlencoded 三者之一)
    如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则请求失败。例如如下允许使用Conten-Type和X-Custom-Header请求头
res.setHeader('Access-Control-Allow-Headers', 'Conten-Type, X-Custom-Header')
  • 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', '*')

CORS请求的分类

  • 简单请求
    • 请求方式：GET、POST、HEAD三者之一
    • HTTP 头部信息不超过以下几种字段: 无自定义头部字段、Accept、Accept-LanguageContent-Language、DPR.Downlink、Save-Data、 Viewport-Width、 Width 、Content-Type (只有三个值application/x-www-formurlencoded、multipart/form-data、text/plain)。
  • 预检请求
    在浏览器与服务器正式通信之前，浏览器会发送OPTION请求进行预检，以获知服务器是否允许该实际请求，所以这一次的OPTION请求称为预检请求。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。
    • 请求方式：GET、POST、HEAD之外的请求Method类型
    • 请求头中包含自定义头部字段
    • 向服务器发送了application/json格式的数据。
  • 简单请求和预检请求的区别
    • 简单请求的特点：客户端与服务器之间只会发生一次请求
    • 预检请求的特点：客户端与服务器之间会发生两次请求，OPTION预检请求成功之后才会发起真正的请求。

示例

  • 修改之前的test.html代码如下
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

  <!--输入以下内容-->
  <button id="btnGET">GET</button>
  <button id="btnPOST">POST</button>
  <!--添加一个新的按钮-->
  <button id="btnDelete">DELETE</button>


  <script>
    $(function () {
      //测试GET接口
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://127.0.0.1/api/get',
          data: { name: 'zs', age: 20 },
          success: function (res) {
            console.log(res)
          },
        })
      })
      //测试POST接口
      $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1/api/post',
          data: { bookname: '区块链', author: 'thq' },
          success: function (res) {
            console.log(res)
          },
        })
      })

      //为删除按钮绑定点击事件处理函数
      $('#btnDelete').on('click', function () {
        $.ajax({
          type: 'DELETE',
          url: 'http://127.0.0.1/api/delete',
          data: { bookname: '区块链', author: 'thq' },
          success: function (res) {
            console.log(res)
          },
        })
      })
    })
  </script>

</body>

</html>
  • 然后在API.js文件中添加代码
//路由模块
const express = require('express')
const router = express.Router()

router.get('/get', (req, res) => {
  //获取到客户端通过查询字符串发送到服务器的数据
  const query = req.query
  //调用res.send()方法把数据响应给客户端
  res.send({
    status: 0,  //状态0表示成功，1表示失败
    msg: 'GET请求成功！',  //状态描述
    data: query    //需要响应给客户端的具体数据
  })
})

router.post('/post', (req, res) => {
  //获取客户端通过请求体发送到服务器的 URL-encoded数据
  //如果要获取URL-encoded格式的请求体数据，必须配置中间件app.use(express.urlencoded({ extended: false}))
  const body = req.body
  //调用res.send()方法把数据响应给客户端
  res.send({
    status: 0,    //状态0表示成功，1表示失败
    msg: 'POST请求成功！',  //状态描述消息
    data: body    //需要响应给客户端的具体数据
  })
})

//定义DELETE接口
router.delete('/delete', (req, res) => {
  res.send({
    satus: 0,
    msg: 'DELET请求成功',
  })
})

module.exports = router

然后我们运行test.js文件启动服务器，然后打开网页，点击DELETE按钮即可看到出现了两次请求
在这里插入图片描述

JSONP接口

  • 概念
    浏览器通过 < script >标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。
  • 特点
    • JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
    • JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。
  • 创建JSONP接口的注意事项
    如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口，否则JSONP接口会被处理成开启了CORS的接口，示例代码如下
//优先创建JSONP接口，这个接口不会被处理成CORS接口
app.get('/api/jsonp', (req, res) => { })

//再配置CORS中间件，后续的所有接口都会被处理成CORS接口
app.use(cors())

//这是一个开启了CORS的接口
app.get('/api/get', (req, res) => { })
  • 实现JSONP接口的步骤
    • 获取客户端发送过来的回调函数的名字
    • 得到要通过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)
})
  • 示例
    在之前的test.js文件中添加代码后如下
//导入express模块
const express = require('express')

//创建express服务器实例
const app = express()

//配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

//必须在配置cors中间件之前配置JSONP的接口
app.get('/api/jsonp', (req, res) => {
  //得到函数的名称
  const funcName = req.query.callback
  //定义要发送到客户端的数据对象
  const data = { name: 'zs', age: 22 }
  //拼接出一个函数的调用
  const scriptStr = `${funcName}(${JSON.stringify(data)})`
  //把拼接的字符串响应给客户端
  res.send(scriptStr)
})

//一定要在路由之前配置之cors这个中间件，从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())

//导入并注册路由模块
const router = require('./API')
app.use('/api', router)




//调用app.listen方法指定端口号并启动服务器
app.listen(80, () => {
  console.log('Express server running at http://127.0.0.1')
})
  • 使用jQuery发起JSONP请求
    调用$.ajax()函数，提供JSONP的配置选项，从而发起JSONP请求。
    在test.html文件中添加代码后如下
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

  <!--输入以下内容-->
  <button id="btnGET">GET</button>
  <button id="btnPOST">POST</button>
  <button id="btnDelete">DELETE</button>
  <button id="btnJSONP">DELETE</button>


  <script>
    $(function () {
      //测试GET接口
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://127.0.0.1/api/get',
          data: { name: 'zs', age: 20 },
          success: function (res) {
            console.log(res)
          },
        })
      })
      //测试POST接口
      $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1/api/post',
          data: { bookname: '区块链', author: 'thq' },
          success: function (res) {
            console.log(res)
          },
        })
      })

      //为删除按钮绑定点击事件处理函数
      $('#btnDelete').on('click', function () {
        $.ajax({
          type: 'DELETE',
          url: 'http://127.0.0.1/api/delete',
          data: { bookname: '区块链', author: 'thq' },
          success: function (res) {
            console.log(res)
          },
        })
      })

      //为JSONP按钮绑定点击事件处理函数
      $('#btnJSONP').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://127.0.0.1/api/jsonp',
          dataType: 'jsonp',
          success: function (res) {
            console.log(res)
          }
        })
      })



    })
  </script>

</body>

</html>
  • 然后打开网页，点击JSONP
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI论文速读 | TPLLM：基于预训练语言模型的交通预测框架

AI论文速读 | TPLLM：基于预训练语言模型的交通预测框架

论文标题&#xff1a;TPLLM: A Traffic Prediction Framework Based on Pretrained Large Language Models 作者&#xff1a;Yilong Ren&#xff08;任毅龙&#xff09;, Yue Chen, Shuai Liu, Boyue Wang&#xff08;王博岳&#xff09;,Haiyang Yu&#xff08;于海洋&#x…
阅读更多...
【Linux进程的知识点】

【Linux进程的知识点】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档文章目录 前言 操作系统的知识补充 我们来理解一个用户操作接口&#xff1a; 进程的理解 进程的基本概念 描述进程-PCB task_struct-PCB的一种 task_ struct内容分类 …
阅读更多...
【四】【算法分析与设计】贪心算法的初见

【四】【算法分析与设计】贪心算法的初见

455. 分发饼干 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有…
阅读更多...
Terrace联合创始人兼CEO Jesse Beller确认出席Hack.Summit() 2024区块链开发者大会

Terrace联合创始人兼CEO Jesse Beller确认出席Hack.Summit() 2024区块链开发者大会

在科技创新的浪潮中&#xff0c;区块链技术以其独特的去中心化、透明性和安全性&#xff0c;正逐渐成为引领未来发展的重要力量。在这样的背景下&#xff0c;备受瞩目的Hack.Summit() 2024区块链开发者大会即将于4月9日至10日在香港数码港盛大举行。本次大会的亮点之一&#xf…
阅读更多...
Linux系统安全②SNAT与DNAT

Linux系统安全②SNAT与DNAT

一.SNAT 1.定义 利用SNAT技术实现2台私网地址都可以访问公网 2.实验环境准备 &#xff08;1&#xff09;三台服务器&#xff1a;PC1客户端、PC2网关、PC3服务端。 &#xff08;2&#xff09;硬件要求&#xff1a;PC1和PC3均只需一块网卡、PC2需要2块网卡 &#xff08;3&a…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇

onBeforeUnload onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) > boolean) 刷新或关闭场景下&#xff0c;在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点&#xff0c;才会触发此回调。 参数…
阅读更多...
docker部署多功能网络工具箱

docker部署多功能网络工具箱

功能 查看自己的IP&#xff1a;从多个 IPv4 和 IPv6 来源检测显示本机的IP 查看IP信息&#xff1a;显示所有 IP 的相关信息 可用性检测&#xff1a;检测一些网站的可用性 WebRTC 检测&#xff1a;查看使用 WebRTC 连接时使用的 IP DNS 泄露检测&#xff1a;查看 DNS 出口信息 …
阅读更多...
NVMFS5A160PLZT1G汽车级功率MOSFET P沟道60 V 15A 满足AEC-Q101标准

NVMFS5A160PLZT1G汽车级功率MOSFET P沟道60 V 15A 满足AEC-Q101标准

关于汽车电子AEC Q101车规认证&#xff1f; 是一种针对分立半导体的可靠性测试认证程序&#xff0c;由汽车电子协会发布。这个认证程序主要是为了确保汽车电子产品在各种严苛的条件下能够正常工作和可靠运行。它包括了对分立半导体的可靠性、环境适应性、温度循环和湿度变化等…
阅读更多...
STM32平替GD32有多方便

STM32平替GD32有多方便

众所周知， GD32一直模仿STM32，从未被超越。 我最近公司使用的GD32E230C6T6 这款芯片有48个引脚。 属于小容量的芯片。 我有一个用STM32写的代码，之前是用的 STM32F103CB 这款芯片是中容量的。 不过在keil中，只需要这两步，就能使用原来的逻辑，几乎不用修改代码。 1. …
阅读更多...
武汉儿童医院变电所电力运维平台系统的设计及应用

武汉儿童医院变电所电力运维平台系统的设计及应用

彭姝麟 Acrelpsl 1 引言 2015年国务院发布《中共中央、国务院关于进一步深化电力体制改革的若干意见》&#xff08;中发[2015]9号&#xff09;&#xff0c;简称“电改9号文”。而本次新电改的重点是“三放开一独立三强化”&#xff1a;输配以外的经营性电价放开、售电业务放开…
阅读更多...
APP测试基本流程以及APP测试要点

APP测试基本流程以及APP测试要点

一、 APP测试基本流程 1、流程图 2、测试周期 测试周期可按项目的开发周期来确定测试时间&#xff0c;一般测试时间为两三周&#xff08;即15个工作日&#xff09;&#xff0c;根据项目情况以及版本质量可适当缩短或延长测试时间。 3、测试资源 测试任务开始前&#xff0c;…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的车牌检测系统（Python+PySide6界面+训练代码）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的车牌检测系统（Python+PySide6界面+训练代码）

摘要&#xff1a;本篇博客详细介绍了如何利用深度学习技术开发一个先进的车牌检测系统&#xff0c;并附上了完整的实现代码。系统核心采用了强大的YOLOv8算法&#xff0c;并对前代版本如YOLOv7、YOLOv6、YOLOv5进行了详尽的性能评估&#xff0c;包括mAP和F1 Score等关键指标的对…
阅读更多...
three.js 鼠标左右拖动改变玩家视角

three.js 鼠标左右拖动改变玩家视角

这里主要用到了 一个方法 obj.getWorldDirection(); obj.getWorldDirection()表示的获取obj对象自身z轴正方向在世界坐标空间中的方向。 按下 W键前进运动&#xff1b; <template><div><el-container><el-main><div class"box-card-left…
阅读更多...
Qt(C++) | QPropertyAnimation动画(移动、缩放、透明)篇

Qt(C++) | QPropertyAnimation动画(移动、缩放、透明)篇

动画类继承关系图 # QPropertyAnimation QPropertyAnimation是一个可以在Qt应用程序中使用的动画框架。它可以用于创建各种动画效果，包括但不限于以下几种： 1. 移动动画：可以将一个对象从一个位置平滑地移动到另一个位置。比如，你可以创建一个按钮，当用户点击它时，按钮…
阅读更多...
Python语法基础

Python语法基础

Python 运行方式 交互解释器&#xff1a;进入交互解释器 Pycharm 里面有个 Terminal 终端&#xff0c;点击即可进入Python的交互环境 语句快缩进 同行多个语句 输出语句:print 输入语句: 变量定义: 变量赋值: 运算符: 基本数字类型: 数字表示方法: 定义字符串: 定义列表:
阅读更多...
【Vue3】深入理解Vue3路由器的工作原理to的两种写法

【Vue3】深入理解Vue3路由器的工作原理to的两种写法

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
整块代码自动生成、智能括号匹配……CodeGeeX编程提效，功能再升级！

整块代码自动生成、智能括号匹配……CodeGeeX编程提效，功能再升级！

CodeGeeX插件功能持续打磨&#xff0c;希望成为开发者更高效的智能编程工具&#xff0c;提高开发速度和代码质量。今天介绍VSCode中最新的v2.4.0版本插件新功能&#xff0c;让你在编写代码时更加得心应手。 一、新增block代码块生成的设置 CodeGeeX插件中&#xff0c;以往针对…
阅读更多...
读西游记第一回：西游记世界格局

读西游记第一回：西游记世界格局

天地之数&#xff1a; 元&#xff1a;十二万九千六百岁&#xff08;129600年&#xff09; 1元12会&#xff1a;子、丑、寅、卯、巳、午、未、申、酉、戌、亥。每会18000年。与12地支对应。 亥会期&#xff1a;前5400年混沌期&#xff0c;后5400年&#xff0c;盘古开天辟地&am…
阅读更多...
【阿里云系列】-ACK的Java应用POD无法访问云数据库Redis

【阿里云系列】-ACK的Java应用POD无法访问云数据库Redis

问题介绍 如下图所示&#xff0c;是ACK集群的POD访问阿里云的云数据库Redis&#xff0c;如何实现访问呢 配置步骤 要实现ACK集群内的所有POD都可以访问云数据库Redis&#xff0c;则需要在Redsi的白名单里增加源IP或网段&#xff0c;如下图所示 注意&#xff1a; 以上添加…
阅读更多...
小型校园网配置笔记

小型校园网配置笔记

1&#xff0c;搭建网络拓扑图 LSW1:三层交换机命令&#xff1a; <Huawei>sys [Huawei]undo info-center enable Info: Information center is disabled. [Huawei]vlan batch 10 20 30 40 100 101 [Huawei]int vlan 10 [Huawei-Vlanif10]ip add 192.168.10.254 24 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023