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段,复制一部分关键的路径,都不到就在少复制一点


相关推荐
云边云科技_云网融合10 小时前
AI 网关:企业 AI 时代的 “智能交通枢纽“—— 六大行业典型场景深度解析
大数据·运维·人工智能
明夜之约11 小时前
Linux 系统命令使用速查手册
linux·运维
武子康11 小时前
调查研究-153 Cloudflare 能部署网站吗?2026 年完整对比 Vercel / Netlify / 自建服务器
大数据·运维·服务器·人工智能·部署·devops·opc
Zldaisy3d11 小时前
物理测试不是唯一方式!增材制造零部件认证路径正在悄悄改变
大数据·服务器·制造
utf8mb4安全女神11 小时前
子网划分【概念+实操+理解】
运维·服务器·网络
xcLeigh11 小时前
KES数据库运维监控与故障排查实战
运维·数据库·sql·故障排查·运维监控·kes
比昨天多敲两行11 小时前
Linux信号
linux·运维·服务器
sulikey12 小时前
ELF文件中的“节“与“段“,如何与虚拟地址空间中的“分页“和“分段“产生联系?
linux·服务器·elf·虚拟地址空间·分页·分段·elf文件
志栋智能12 小时前
超自动化安全:构建智能安全运营的神经系统
大数据·运维·网络·人工智能·安全·自动化