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


相关推荐
腾渊信息科技公司9 小时前
工业数据运维痛点根治方案:基于AI Agent的产线自动化台账系统落地
运维·人工智能·自动化·个人开发·ai编程
Dxy12393102169 小时前
Proxy Protocol v2 详解
运维
踏月的造梦星球9 小时前
DMDPC 学习:架构、部署、运维与调优
运维·数据库·学习·架构
潘正翔9 小时前
docker核心概念
linux·运维·服务器·docker·容器·centos·运维开发
renhongxia110 小时前
世界模型,是“空中楼阁”还是AGI的“最后一块拼图”?
运维·服务器·数据库·人工智能·算法·agi
Dovis(誓平步青云)12 小时前
远程办公软件文件传输实测:6 款工具的速度、稳定性和办公体验对比
linux·运维·服务器·后端·生成对抗网络
专注_每天进步一点点12 小时前
SLB(绑定弹性公网ip)-gateway-业务pod,gateway上出现reset by peer,业务pod上没有reset by peer
服务器·tcp/ip·gateway
csdn_aspnet12 小时前
GitHub Actions自动化运维实战,用CI/CD流水线实现测试、部署、安全扫描一体化
运维·安全·ci/cd·自动化·github
ACP广源盛1392462567313 小时前
GSV6155@ACP# 搭配 AI 服务器、AI PC 完整适配方案
大数据·服务器·人工智能·分布式·单片机·嵌入式硬件
Inhand陈工14 小时前
数据中心UPS无功补偿与智能化监控方案:基于IG502的Modbus RTU转IEC61850实战
运维·人工智能·物联网·信息与通信