文章目录
- [前端八股整理｜浏览器｜高频小题 01](#前端八股整理｜浏览器｜高频小题 01)
- 1.跨域是什么?跨域如何解决?
-
- [1.1 代理](#1.1 代理)
- [1.2 CORS](#1.2 CORS)
- 2.浏览器输入url会发生什么
前端八股整理｜浏览器｜高频小题 01
1.跨域是什么?跨域如何解决?
浏览器有一个重要的安全策略,称之为同源策略
其中,源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或者跨域
同源策略是指,若页面的源和页面运行过程中加载的源不一致,出于安全考虑,浏览器会对跨域的资源访问进行一些限制,同源策略对 ajax 的跨域限制最为凶狠,默认情况下,它不允许 ajax 访问跨域资源
常见的解决跨域问题有以下几种,常见的有
- 代理,常用
- CORS,常用
1.1 代理
下面介绍三种方法:
- vite 配置
- nginx 反向代理
- node.js 做 BFF 层
vite 配置:
假设前端页面跑在：
javascript
http://localhost:8080后端接口跑在：
javascript
http://localhost:3000这两个地址虽然主机都是 localhost，但端口不同：
- 前端：8080
- 后端：3000
所以它们不是同源，浏览器里直接发 AJAX 请求就会跨域。
在 vite.config.js 或 vite.config.ts 里：
javascript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
})意思就是：
- 只要请求路径是以 /api 开头
- 就代理到 http://localhost:3000
所以只要是前端写fetch('/api/user'),实际上会被转发到http://localhost:3000/api/user
nginx 反向代理
同源策略是浏览器的安全策略，不是 Nginx 的策略,所以Nginx 作为服务器，不受浏览器同源策略限制
前端先把请求发给 Nginx，Nginx 再把请求转发到真正的后端服务。
node.js 做 BFF 层
BFF 层,就是专门为前端服务的一层后端,夹在前端,前端先把请求打到自己这层 Node 服务，再由这层 Node 服务去请求真实的 API 服务器。
1.2 CORS
CORS
也是现在最标准的解决方法。它的核心思想就是，让后端服务器在返回信息的时候，加一个特殊的头（比如 Access-Control-Allow-Origin），来告诉浏览器：'我允许这个来源的网站访问我的数据'。这样浏览器看到了许可，就不会拦截了.
也就是后端去设置访问白名单
除了 Access-Control-Allow-Origin，还有可能会配：
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Allow-Credentials
也就是说，它不只是控制"谁能来"，还会控制：
- 你能用什么请求方法
- 你能带什么请求头
- 能不能带 cookie
Access-Control-Allow-Origin 的作用是告诉浏览器，当前资源允许哪些源进行跨域访问。浏览器在收到跨域响应后，会检查这个响应头的值是否匹配当前页面的源，如果匹配，就说明服务端允许这次跨域访问，浏览器就会放行并允许前端代码读取响应内容。
2.浏览器输入url会发生什么
大致执行顺序:
- URL解析
- DNS 解析：缓存判断 + 查询IP地址
- TCP 连接：TCP 三次握手
- SSL/TLS四次握手（只有https才有这一步）
- 浏览器发送请求
- 服务器响应请求并返回数据
- 浏览器解析渲染页面
- 断开连接：TCP 四次挥手
浏览器输入 URL 后，首先会对 URL 做解析，判断是合法地址还是搜索词；如果是合法 URL，就进入网络流程。
接着浏览器会做 DNS 解析，把域名解析成 IP 地址，这一步通常会先查缓存。
拿到 IP 后，如果是 HTTP，一般会建立 TCP 连接；如果是 HTTPS，还会在 TCP 连接基础上再进行 TLS 握手，建立安全加密通道。
连接建立好之后，浏览器会向服务器发送 HTTP 请求，服务器处理后返回响应报文。
浏览器拿到响应后，会开始解析 HTML，构建 DOM；解析 CSS，构建 CSSOM；再生成渲染树，进行布局和绘制。过程中如果遇到外部资源，比如 JS、CSS、图片，还会继续发请求加载。
最后连接是否断开，要看具体情况，比如 keep-alive、HTTP/2 连接复用等，并不是页面一渲染完就一定立刻断开。
1.追问 DNS
"DNS 解析一般会先查缓存，比如浏览器缓存、操作系统缓存等；如果本地没有，再由本地域名服务器去逐级查询，最终找到权威域名服务器返回 IP。"
不用第一轮就把每一层全背出来。
- 追问 HTTPS
"HTTPS 会比 HTTP 多一步 TLS 握手，用来协商加密算法、验证证书并生成会话密钥，这样后续传输的数据就是加密的。"
- 追问渲染流程
"浏览器渲染大致是：解析 HTML 生成 DOM，解析 CSS 生成 CSSOM，合并生成 Render Tree，然后 Layout、Paint，最后可能还会有 Composite。"