漫谈 B/S 架构

B/S 架构，即浏览器/服务器（Browser/Server）架构，是一种现在最常见的软件架构模式。它通过浏览器作为客户端，与服务器进行交互，实现数据的展示和处理。

前端

前端即 Browser（浏览器）。可以认为由 HTML、CSS 和 JavaScript 三大部分组成。

HTML 定义了网页的结构和内容（有什么），CSS 用于定义网页的样式和布局（长什么样），JavaScript 则负责网页的交互和动态效果（能做什么）。

JavaScript 可以操作 HTML 和 CSS，以便实现网页的动态效果和数据变化；可以控制读取 HTML 元素中的（用户输入的）内容，以便实现与用户的交互；可以发起网络请求，与服务器进行数据交换。

举个例子，当你给一个帖子点赞时，你的输入（点击点赞按钮）的动作被 JavaScript 捕获，它操作 CSS 元素改变按钮的样式表示已点赞（通常是深蓝色）。

同时也会发起一个网络请求将点赞信息发送到服务器。

再举个例子，当你查看一个帖子的评论时（通常是往下滚），JavaScript 能检测到这个动作，并发起一个网络请求从服务器获取评论数据。获得数据后动态去修改页面上的 HTML 元素将评论内容显示在页面上。

前端框架

理论上只需要编写这三块就能完成前端。但是，实际开发中，我们多用 Vue, React 等前端框架来开发。

这些框架提供了很多封装好的组件和工具函数，并定义了一套可拓展性很好的架构，使用它们可以大大提高前端开发效率。

使用前端框架编写的前端程序，通常需要经过编译打包，生成浏览器能直接运行的 HTML、CSS 和 JavaScript 文件。

后端

严格意义上，后端是 “内容服务” 和 “应用服务” 的总和。这里的 “xx服务” 指一个运行在某台物理机器上的程序，不妨叫它 “后端程序”。

后端的开发比较自由，只要能监听和处理 HTTP 请求，就可以用任何编程语言和框架来实现。

网络请求和端口

在计算机网络中，常以 “IP 地址” 来区分不同的机器，而以 “端口号” 来区分同一台机器上的不同服务。

一个后端程序需要监听一个端口号，以便接收和处理网络请求。

一个网络请求通常需要包含三个要素：目标机器的 IP 地址、目标机器的端口号、请求的数据内容。

前端（浏览器）发送网络请求后，数据包经过互联网传输到达目标机器，目标机器的操作系统根据端口号将请求数据交给对应的后端程序处理。如果后端程序有响应数据包，那么会向前端回传响应数据包。回传数据包的过程和发送请求数据包的过程类似。

一张快递单看完整 HTTP 旅程（点击展开）

1. 应用层填单：浏览器把“GET /index.html”当成货物（请求数据），意思是“请把首页发给我”。
2. 传输层打包：浏览器通过快递小哥（操作系统）提供的物流 APP（套接字接口），委托物流公司（TCP 协议传输层）来运送货物。浏览器会在物流 APP 上填写目标小区名字（目的地 IP）和门牌号（目的端口）。
3. 操作系统打包贴单：快递小哥给包裹贴上“始发地址:本机 IP（ + 临时端口”和“目的地址:服务器 IP + 端口”，然后扔进小区（物理机器）的快递网点（网卡）。
4. 路由器中转站：城市转运中心（家用路由器）只看“服务器 IP”（目标小区名字）字段，查路由表决定走哪条高速；随后每到一个新转运中心（路由器）都重复这一动作，直到包裹抵达目标城市的转运中心。
5. 签收与分拣：目标机器的网卡签收包裹，操作系统按“目的端口”分拣，把包裹交给正在该端口“蹲守”的后端程序进程。
6. 后端回货：后端程序拆开包裹，处理请求，再生成新的响应包裹（HTML 页面），按原路回寄，只是收发地址对调。
7. 浏览器收件：浏览器收到响应包裹，拆开展示，页面渲染完成。

这里省略了数据链路层的交互逻辑，不完全过程不完全准确。

内容服务器

内容服务器一般用于提供一些静态资源；例如访问一个网站时，必须要先请求这个网站的前端程序（HTML、CSS、JavaScript 文件），这些文件通常存放在内容服务器上。

获取到前端程序后，浏览器会解析并运行这些程序，从而实现网页的展示和交互。

一些图片资源等，也放在内容服务器上。

应用服务器

应用服务器用于处理本网站的前端程序发起的各种请求，例如获取数据、提交数据等。

当然，应用服务器和内容服务器可以是同一个后端程序提供。

设计应用服务器时，务必注意鉴权问题，只能允许合法的用户以合法的方式访问合法的数据。

跨域资源请求

浏览器出于安全考虑，通常会限制前端程序向协议、域名或端口不一致的服务器发起请求，这种限制称为“同源策略”。

假设前端程序是从 https://example.com:443 中请求获取到的，那么这个前端程序只能向 https://example.com:443 发起请求，不能向 https://api.example.com:443 或 http://example.com:8000 发起请求。

一般来说，当内容服务器和应用服务器是同一个后端程序时，这个限制不会带来问题。

但是，当你想在浏览器上执行的前端程序，向另一个服务器发起请求时（例如前端程序托管在 https://example.com，而应用服务器是 https://api.example.com），就会遇到跨域资源请求的问题。

这些问题可以通过一些技术手段来解决，例如 CORS（跨域资源共享）。

偶尔可能会写一写本地的 html/javascript 程序，虽然它可以方便的运行在浏览器中，但如果需要向别的服务发送请求，请求就会被浏览器拦下来。