f12网络教程 客户端 服务端 服务器前端 后端

文章目录

  • [客户端 服务端 服务器 前端 后端](#客户端 服务端 服务器 前端 后端)
    • 客户端(Client)------通信角色
      • [请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。](#请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。)
        • [url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP](#url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP)
    • 服务端(Server)--通信角色
      • [服务器 程序运行的机器](#服务器 程序运行的机器)
    • 前端(Front-end)------系统分层
      • [前端不等于浏览器,浏览器 = 前端常见的运行环境之一](#前端不等于浏览器,浏览器 = 前端常见的运行环境之一)
    • [后端 -- 系统分层](#后端 -- 系统分层)
    • 总结
      • [Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端](#Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端)
      • 程序&服务器
  • [f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求](#f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求)
    • [清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面](#清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面)
    • [XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求](#XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求)
    • [XHR / Fetch XHR / Fetch 这个筛选器 = 只看"接口请求",前端请求后端接口,就是:浏览器用来和后端接口"据"的方式](#XHR / Fetch XHR / Fetch 这个筛选器 = 只看“接口请求”,前端请求后端接口,就是:浏览器用来和后端接口“据”的方式)
      • [XHR = XMLHttpRequest](#XHR = XMLHttpRequest)
      • Fetch
      • [XHR/Fetch 请求详情](#XHR/Fetch 请求详情)
        • [payload 载荷](#payload 载荷)
        • [preview 预览](#preview 预览)
        • response
        • [Initiator(启动器 / 调用来源)](#Initiator(启动器 / 调用来源))
        • Timing(时间)
        • Cookies(Cookie)
        • [header 请求头](#header 请求头)
    • [浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别](#浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别)
      • [为什么 XHR / Fetch 才是前后端交互?](#为什么 XHR / Fetch 才是前后端交互?)
  • 怎么在后端代码,搜请求的网址。搜path段,复制一部分关键的路径,都不到就在少复制一点

客户端 服务端 服务器 前端 后端

客户端(Client)------通信角色

请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。


url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP


服务端(Server)--通信角色


服务器 程序运行的机器


前端(Front-end)------系统分层


前端不等于浏览器,浏览器 = 前端常见的运行环境之一


后端 -- 系统分层



总结

Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端

程序&服务器

f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求

清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面

XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求


XHR / Fetch XHR / Fetch 这个筛选器 = 只看"接口请求",前端请求后端接口,就是:浏览器用来和后端接口"据"的方式

XHR = XMLHttpRequest

Fetch

XHR/Fetch 请求详情

payload 载荷
preview 预览
response
Initiator(启动器 / 调用来源)
Timing(时间)
Cookies(Cookie)
header 请求头

浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别

为什么 XHR / Fetch 才是前后端交互?


怎么在后端代码,搜请求的网址。搜path段,复制一部分关键的路径,都不到就在少复制一点


相关推荐
xuanwenchao2 小时前
ROS2学习笔记 - 2、类的继承及使用
服务器·笔记·学习
HYNuyoah2 小时前
docker 安装win10系统
运维·docker·容器
liulilittle2 小时前
Prompt for OpenCode + CodeX-5.3:多个重型任务交付给AI自动化完成
运维·自动化·prompt
孙同学_2 小时前
【项目篇】高并发服务器 - HTTP服务器组件拆解,从Util到HttpServer
运维·服务器·http
2601_949817722 小时前
基础篇:Linux安装redis教程(详细)
linux·运维·redis
Sherry Wangs3 小时前
服务器 CUDA版本升级指南
运维·服务器
CQU_JIAKE3 小时前
4.17[Q]
java·linux·服务器
上海云盾-小余3 小时前
DDoS 攻击应急响应全流程:从告警触发到业务恢复的黄金 15 分钟
服务器·安全·游戏·ddos
LXY_BUAA3 小时前
《ubuntu22.04》_新系统的配置_20260418
linux·运维·服务器
上海云盾-小余3 小时前
API 接口 DDoS 与 CC 攻击防护实战:守住业务最脆弱的数字入口
服务器·ddos