【工作记录】F12查看接口信息及postman中使用

news2025/3/31 0:56:08

可参考

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)_f12查看接口及参数-CSDN博客

1、接口信息

接口基础知识2:http通信的组成_接口请求信息包括-CSDN博客

HTTP类型接口之请求&响应详解 - 三叔测试笔记 - 博客园

1. HTTP请求报文

  • 概念:HTTP请求报文是客户端向服务器发送的请求,用于获取资源或提交数据。根据请求方法的不同,请求报文的结构和内容会有所变化。

  • 报文结构

    1. 请求行(Request Line)
      ① 格式:<方法> <请求目标> <HTTP版本>
      ② 示例:GET /index.html HTTP/1.1
      ③ 作用:<方法>用于表示请求的类型(如GET, POST等);<请求目标>通常是请求资源的URL路径;<HTTP版本>如HTTP/1.1,不同版本的HTTP协议具有不同的特性。

    2. 请求头(Request Headers):请求头可包含多个字段,字段格式为:<字段名>: <字段值>(eg:Accept: text/html);请求头的作用是提供客户端信息和请求参数。

    3. 空行(Empty Line):其作用是分隔请求头和请求体。

    4. 请求体(Request Body):可选,通常用于 POST、PUT等请求类型。请求体包含了提交的数据(如提交的表单数据)。

  • 首部行常用字段

    1. Host:目标服务器的主机名。

    2. User-Agent:客户端信息(如浏览器类型)。

    3. Accept:客户端接受的媒体类型(如 text/html)。

    4. Content-Type:请求体的媒体类型(如 application/json)。

    5. Content-Length:请求体的长度。

  • GET请求与POST请求的区别

    1. GET请求:请求体为空,数据直接通过URL传递。GET请求的特点有:①数据长度有限(受URL长度限制);②数据可见(包含在URL中),不安全;③适用于获取资源。

    2. POST请求:请求体包含数据,数据通过请求体(载荷)传递。POST请求的特点有:①数据长度理论上无限制;②数据不可见(封装在请求体中),相比GET请求更安全;③适用于提交数据(例如提交表单数据)。

2. HTTP响应报文

  • 概念:HTTP响应报文是服务器对客户端请求的响应,返回请求结果。其结构包括状态行、响应头和响应体。

  • 报文结构

    1. 状态行(Status Line)
      ① 格式:<HTTP版本> <状态码> <状态短语>
      ② 示例:HTTP/1.1 200 OK
      ③ 作用:<HTTP版本>如HTTP/2,不同版本的HTTP协议具有不同的特性;<状态码>表示请求的结果(如 200、404);<状态短语>则是对状态码的简要描述(如 OK、Not Found)。

    2. 响应头(Response Headers):响应头可包含多个字段,字段格式为:<字段名>: <字段值>(eg: Content-Type: text/html);请求头的作用是提供客户端信息和请求参数;响应头的作用是提供服务器信息和响应参数。

    3. 空行(Empty Line):其作用是分隔响应头和响应体。

    4. 响应体(Response Body):可选,包含服务器返回的数据,也可能没有返回,比如304。

  • 首部行常用字段

    1. Content-Type:响应体的媒体类型(如 text/html)。

    2. Content-Length:响应体的长度(如 1024字节)。

    3. Set-Cookie:服务器设置的Cookie。

    4. Cache-Control:缓存控制指令。

  • 常见状态码

    1. 200 OK:请求成功。

    2. 404 Not Found:请求的资源未找到。

    3. 500 Internal Server Error:服务器内部错误。

2、浏览器F12查看

1. Headers标头

包含请求头和响应头信息,如:

Content-Type:指定请求或响应的内容类型(如application/json)。

Authorization:用于身份验证的令牌或凭据。

Cookie:存储在客户端的会话信息。

User-Agent:标识发送请求的浏览器或客户端。

2. Payload负载 

显示请求体的内容,即前端传递给后端的参数。对于不同类型的请求,Payload内容有所不同:

POST/PUT 请求:通常为JSON格式的数据,例如:

3. Preview预览

更友好的格式展示返回数据,便于阅读。对于复杂的嵌套结构,Preview 会自动格式化并提供折叠功能

4. Response响应

显示后端返回的数据,通常为JSON格式。

3、浏览器查看后,使用postman测试接口 

1:在浏览器中捕获请求


1. 打开浏览器开发者工具:
   - 按 `F12` 或右键页面选择 **检查(Inspect)**。
2. 切换到 **Network(网络)** 选项卡。
3. 触发需要分析的POST请求(如提交表单、点击按钮等)。
4. 在请求列表中:
   - 过滤请求类型为 **XHR** 或 **Fetch**(通常POST请求在此分类)。
   - 找到目标POST请求,点击查看详细信息。

2:复制关键信息


1. 复制请求URL
- 在请求详情页的 **Headers** 选项卡中,找到 **Request URL**,右键复制完整URL。

2. 复制请求头(Headers)
- 在 **Headers** 选项卡的 **Request Headers** 区域:
  - 复制关键头信息,如:
    ```http
    Content-Type: application/json  # 或其他类型(如表单)
    Authorization: Bearer xxxxxx    # 认证信息(如有)
    User-Agent: ...

3. 复制负载参数(Payload)
- 切换到 **Payload** 或 **Request** 选项卡(不同浏览器可能名称不同):
  - 查看 **Request Payload** 或 **Form Data**,复制完整的参数(可能是JSON、表单键值对等格式)。

3:在Postman中配置请求


1. 创建新请求**
1. 打开Postman,点击 **+ New** 创建新请求。
2. 设置请求方法为 **POST**。
3. 粘贴复制的 **Request URL** 到地址栏。

2. 添加请求头(Headers)**
1. 切换到 **Headers** 选项卡。
2. 添加复制的请求头(如 `Content-Type`, `Authorization` 等)。

3. 设置请求体(Body)**
1. 切换到 **Body** 选项卡。
2. 根据请求头中的 `Content-Type` 选择对应格式:
   - **JSON 数据**:选择 `raw` → 右侧下拉菜单选 **JSON** → 粘贴JSON参数。
     ```json
     {
       "username": "test",
       "password": "123456"
     }
     ```
   - **表单数据**:选择 `x-www-form-urlencoded` → 填写键值对。
     ```
     key: username, value: test
     key: password, value: 123456
     ```
   - **FormData/文件上传**:选择 `form-data` → 添加键值或文件。

 4:参数格式为form-data

Content-Type: multipart/form-data;

5:参数格式为json

content-type:application/json

 

6:发送请求并验证


1. 点击 **Send** 发送请求。
2. 检查 **Response** 区域的状态码和返回数据,确认是否与浏览器结果一致。

### **常见问题处理**
1. **认证失败**:
   - 检查 `Authorization` 头是否有效(如Token是否过期)。
2. **参数格式错误**:
   - 确保 `Content-Type` 和请求体格式匹配(如JSON需用双引号)。
3. **跨域问题(CORS)**:
   - 在Postman设置中关闭跨域限制(Postman默认绕过CORS)。

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

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

相关文章

2024年认证杯SPSSPRO杯数学建模B题(第二阶段)神经外科手术的定位与导航全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 B题 神经外科手术的定位与导航 原题再现&#xff1a; 人的大脑结构非常复杂&#xff0c;内部交织密布着神经和血管&#xff0c;所以在大脑内做手术具有非常高的精细和复杂程度。例如神经外科的肿瘤切除手术或血肿清除手术&#xff0c;通常需要…

Android 12系统源码_系统启动(二)Zygote进程

前言 Zygote&#xff08;意为“受精卵”&#xff09;是 Android 系统中的一个核心进程&#xff0c;负责 孵化&#xff08;fork&#xff09;应用进程&#xff0c;以优化应用启动速度和内存占用。它是 Android 系统启动后第一个由 init 进程启动的 Java 进程&#xff0c;后续所有…

MOSN(Modular Open Smart Network)-05-MOSN 平滑升级原理解析

前言 大家好&#xff0c;我是老马。 sofastack 其实出来很久了&#xff0c;第一次应该是在 2022 年左右开始关注&#xff0c;但是一直没有深入研究。 最近想学习一下 SOFA 对于生态的设计和思考。 sofaboot 系列 SOFAStack-00-sofa 技术栈概览 MOSN&#xff08;Modular O…

Flink介绍与安装

Apache Flink是一个在有界数据流和无界数据流上进行有状态计算分布式处理引擎和框架。Flink 设计旨在所有常见的集群环境中运行&#xff0c;以任意规模和内存级速度执行计算。 一、主要特点和功能 1. 实时流处理: 低延迟: Flink 能够以亚秒级的延迟处理数据流&#xff0c;非常…

【gradio】从零搭建知识库问答系统-Gradio+Ollama+Qwen2.5实现全流程

从零搭建大模型问答系统-GradioOllamaQwen2.5实现全流程&#xff08;一&#xff09; 前言一、界面设计&#xff08;计划&#xff09;二、模块设计1.登录模块2.注册模块3. 主界面模块4. 历史记录模块 三、相应的接口&#xff08;前后端交互&#xff09;四、实现前端界面的设计co…

PowerBI,用度量值实现表格销售统计(含合计)的简单示例

假设我们有产品表 和销售表 我们想实现下面的效果 表格显示每个产品的信息&#xff0c;以及单个产品的总销量 有一个切片器能筛选各个门店的产品销量 还有一个卡片图显示所筛选条件下&#xff0c;所有产品的总销量 实现方法&#xff1a; 1.我们新建一个计算表&#xff0c;把…

26考研——查找_树形查找_二叉排序树(BST)(7)

408答疑 文章目录 三、树形查找二叉排序树&#xff08;BST&#xff09;二叉排序树中结点值之间的关系二叉树形查找二叉排序树的查找过程示例 向二叉排序树中插入结点插入过程示例 构造二叉排序树的过程构造示例 二叉排序树中删除结点的操作情况一&#xff1a;被删除结点是叶结点…

【行驶证识别】批量咕嘎OCR识别行驶证照片复印件图片里的文字信息保存表格或改名字,基于QT和腾讯云api_ocr的实现方式

项目背景 在许多业务场景中,如物流管理、车辆租赁、保险理赔等,常常需要处理大量的行驶证照片复印件。手动录入行驶证上的文字信息,像车主姓名、车辆型号、车牌号码等,不仅效率低下,还容易出现人为错误。借助 OCR(光学字符识别)技术,能够自动识别行驶证图片中的文字信…

21.Excel自动化:如何使用 xlwings 进行编程

一 将Excel用作数据查看器 使用 xlwings 中的 view 函数。 1.导包 import datetime as dt import xlwings as xw import pandas as pd import numpy as np 2.view 函数 创建一个基于伪随机数的DataFrame&#xff0c;它有足够多的行&#xff0c;使得只有首尾几行会被显示。 df …

LabVIEW FPGA与Windows平台数据滤波处理对比

LabVIEW在FPGA和Windows平台均可实现数据滤波处理&#xff0c;但两者的底层架构、资源限制、实时性及应用场景差异显著。FPGA侧重硬件级并行处理&#xff0c;适用于高实时性场景&#xff1b;Windows依赖软件算法&#xff0c;适合复杂数据处理与可视化。本文结合具体案例&#x…

【NLP 48、大语言模型的神秘力量 —— ICL:in context learning】

目录 一、ICL的优势 1.传统做法 2.ICL做法 二、ICL的发展 三、ICL成因的两种看法 1.meta learning 2.Bayesian Inference 四、ICL要点 ① 语言模型的规模 ② 提示词prompt中提供的examples数量和顺序 ③ 提示词prompt的形式&#xff08;format&#xff09; 五、fine-tune VS I…

vue 中渲染 markdown 格式的文本

文章目录 需求分析第一步:安装依赖第二步:创建 Markdown 渲染组件第三步,使用实例扩展功能1. 代码高亮:2. 自定义渲染规则:需求 渲染 markdown 格式的文本 分析 在Vue 3中实现Markdown渲染的常见方法。通常有两种方式:使用现有的Markdown解析库,或者自己编写解析器…

工业4G路由器赋能智慧停车场高效管理

工业4G路由器作为智慧停车场管理系统通信核心&#xff0c;将停车场内的各个子系统连接起来&#xff0c;包括车牌识别系统、道闸控制系统、车位检测系统、收费系统以及监控系统等。通过4G网络&#xff0c;将这些系统采集到的数据传输到云端服务器或管理中心&#xff0c;实现信息…

企业如何平稳实现从Tableau到FineBI的信创迁移?

之前和大家分享了《如何将Tableau轻松迁移到Power BI》。但小编了解到&#xff0c;如今有些企业更愿意选择国产BI平台。为此&#xff0c;小编今天以Fine BI为例子&#xff0c;介绍如何从Tableau轻松、低成本地迁移到国产BI平台。 在信创政策全面推进的背景下&#xff0c;企业数…

蓝桥与力扣刷题(蓝桥 蓝桥骑士)

题目&#xff1a;小明是蓝桥王国的骑士&#xff0c;他喜欢不断突破自我。 这天蓝桥国王给他安排了 N 个对手&#xff0c;他们的战力值分别为 a1,a2,...,an&#xff0c;且按顺序阻挡在小明的前方。对于这些对手小明可以选择挑战&#xff0c;也可以选择避战。 身为高傲的骑士&a…

前端学习笔记--CSS

HTMLCSSJavaScript 》 结构 表现 交互 如何学习 1.CSS是什么 2.CSS怎么用&#xff1f; 3.CSS选择器&#xff08;重点&#xff0c;难点&#xff09; 4.美化网页&#xff08;文字&#xff0c;阴影&#xff0c;超链接&#xff0c;列表&#xff0c;渐变。。。&#xff09; 5…

31天Python入门——第15天:日志记录

你好&#xff0c;我是安然无虞。 文章目录 日志记录python的日志记录模块创建日志处理程序并配置输出格式将日志内容输出到控制台将日志写入到文件 logging更简单的一种使用方式 日志记录 日志记录是一种重要的应用程序开发和维护技术, 它用于记录应用程序运行时的关键信息和…

使用ucharts写的小程序,然后让圆环中间的空白位置变大

将ringWidth属性调小 extra: { ring: { ringWidth: 20, activeOpacity: 1.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: true, borderWidth: 0, borderColor: #F…

GPT-4o Image

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

C++:函数(通识版)

一、函数的基础 1.什么是函数&#xff1f;&#xff08;独立的功能单位&#xff09; 函数是C中封装代码逻辑的基本单元&#xff0c;用于执行特定任务。 作用&#xff1a;代码复用、模块化、提高可读性。 2、函数的基本结构 返回类型 函数名(参数列表) {// 函数体return 返回值…