feat: add 180 questions (90 sc + 90 fb) for networking subtopics

Cover 9 subtopics from the computer networking documentation: - http-handshake: TCP/TLS/HTTP2/HTTP3 handshakes - http-connection-cost: connection resource overhead & million concurrency - connection-pooling: pool reuse, HTTP/1.1 vs HTTP/2 - http-keepalive: Keep-Alive principle, head-of-line blocking - keepalive-scenarios: when to enable/disable Keep-Alive - domain-sharding: HTTP/1.1 hack, HTTP/2 obsolescence - cdn: edge nodes, caching, DDoS protection - cors: same-origin policy, preflight requests - go-build-strip: -s -w flags, binary size optimization
2026-09-02 21:33:09 +08:00
parent 0fbdefb626
commit df63692a18
28 changed files with 4143 additions and 1 deletions
@@ -0,0 +1,197 @@
+{
+  "topic": "cors",
+  "type": "fill_blank",
+  "schema_version": "1.0.0",
+  "generated": "2026-09-02T21:20:00+08:00",
+  "questions": [
+    {
+      "id": "fb-001",
+      "type": "fill_blank",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "同源策略",
+        "浏览器安全"
+      ],
+      "question": "浏览器的同源策略通过比较 URL 的____三元组来判断两个源是否相同，这三个要素分别是协议、域名和____。",
+      "answer": [
+        "协议",
+        "端口"
+      ],
+      "answer_rule": "all",
+      "explanation": "同源策略（Same-Origin Policy）是浏览器的核心安全机制。'同源'指的是两个 URL 的协议（如 http/https）、域名（如 example.com）和端口（如 80/443）三者完全一致。只要其中任意一个不同，浏览器就认为是跨源请求，会限制脚本对跨源资源的访问。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-002",
+      "type": "fill_blank",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "Origin",
+        "跨源请求"
+      ],
+      "question": "CORS（跨源资源共享）中，浏览器在跨源请求头中自动添加____字段，其值由协议、域名和端口组成，用于告知服务器请求来源。",
+      "answer": [
+        "Origin"
+      ],
+      "answer_rule": "all",
+      "explanation": "Origin 是浏览器在发起跨源请求时自动附加的 HTTP 头字段，格式为 \"scheme://host:port\"（如 \"http://localhost:3000\"）。服务器通过读取该字段来决定是否允许该跨源请求。注意 Origin 不包含路径信息，这是出于隐私考虑。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-003",
+      "type": "fill_blank",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "预检请求",
+        "OPTIONS"
+      ],
+      "question": "对于非简单请求，浏览器会先自动发送一个____方法的预检请求（Preflight Request），服务器返回允许的跨源策略后，浏览器才会发出真正的请求。",
+      "answer": [
+        "OPTIONS"
+      ],
+      "answer_rule": "all",
+      "explanation": "预检请求（Preflight Request）使用 HTTP OPTIONS 方法，在实际请求之前发送。它携带 Access-Control-Request-Method 和 Access-Control-Request-Headers 告知服务器即将发起的跨源请求信息。服务器通过响应头告知浏览器是否允许该请求，从而避免不安全的跨源请求到达服务器。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-004",
+      "type": "fill_blank",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "简单请求",
+        "预检请求"
+      ],
+      "question": "满足以下条件的请求属于简单请求：方法为 GET、____ 或 DELETE，且请求头仅包含 CORS 安全列表字段（如 Accept、Content-Type 限于 text/plain、multipart/form-data、application/x-www-form-urlencoded）。",
+      "answer": [
+        "POST",
+        "PUT"
+      ],
+      "answer_rule": "any",
+      "explanation": "简单请求（Simple Request）不需要预检，浏览器直接发送并附带 Origin 头。判定标准：①方法为 GET、HEAD 或 POST（注意不是 PUT/DELETE）；②Content-Type 只限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一；③没有自定义请求头。不满足任何一条都会触发预检。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-005",
+      "type": "fill_blank",
+      "difficulty": 4,
+      "tags": [
+        "CORS",
+        "Cookie",
+        "Access-Control-Allow-Credentials"
+      ],
+      "question": "当服务器响应 Access-Control-Allow-Origin 设置为通配符 * 时，____设置为 true 将不生效，浏览器会拒绝携带 Cookie 的跨源请求。",
+      "answer": [
+        "Access-Control-Allow-Credentials",
+        "allowCredentials"
+      ],
+      "answer_rule": "any",
+      "explanation": "CORS 规范明确禁止在携带凭据（credentials）时使用通配符 *。当请求附带 Cookie（fetch 的 credentials: 'include' 或 XMLHttpRequest 的 withCredentials = true）时，服务器必须将 Access-Control-Allow-Origin 设置为具体的 Origin 值（不能是 *），同时将 Access-Control-Allow-Credentials 设为 true。这是安全考量，防止任意来源都能携带用户凭据访问资源。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-006",
+      "type": "fill_blank",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "开发环境",
+        "跨域"
+      ],
+      "question": "前端开发时，如果前端运行在 localhost:3000，后端运行在 localhost:8080，由于____不同，浏览器会将其视为跨域请求。",
+      "answer": [
+        "端口",
+        "port"
+      ],
+      "answer_rule": "any",
+      "explanation": "同源策略的三元组中，协议（都是 http）和域名（都是 localhost）相同，但端口号不同（3000 vs 8080），因此被判定为跨源。即使都在本机，浏览器依然严格执行同源策略。常见的解决方式包括开发代理（如 Vite 的 proxy 配置）或后端配置 CORS 头。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-007",
+      "type": "fill_blank",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "WebSocket"
+      ],
+      "question": "WebSocket 协议本身不受 CORS 限制，但 WebSocket 握手阶段的 HTTP Upgrade 请求会受到____策略的影响，浏览器可能会拒绝握手。",
+      "answer": [
+        "同源",
+        "CORS",
+        "同源策略"
+      ],
+      "answer_rule": "any",
+      "explanation": "WebSocket 连接通过 HTTP Upgrade 机制建立，浏览器在发起 WebSocket 握手时会检查目标 URL 是否符合 CORS 策略。如果服务器没有在响应中返回合适的 Access-Control-Allow-Origin 头，某些浏览器可能拒绝握手。不过一旦 WebSocket 连接建立成功，后续的数据帧传输完全不受 CORS 限制，这与 HTTP 请求的 CORS 机制有本质区别。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-008",
+      "type": "fill_blank",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "Nginx",
+        "反向代理"
+      ],
+      "question": "生产环境中常用的跨域解决方案是通过 Nginx 配置____，让前端和后端请求走同一个域名的同一端口，由 Nginx 在服务端转发请求。",
+      "answer": [
+        "反向代理",
+        "reverse proxy"
+      ],
+      "answer_rule": "any",
+      "explanation": "Nginx 反向代理是解决跨域的生产级方案。原理：前端请求统一发到 Nginx（如 https://api.example.com），Nginx 根据 location 规则将 /api/* 的请求代理到实际后端服务。因为浏览器只和 Nginx 通信，不存在跨源问题。相比 CORS 头方案，反向代理还有统一入口、负载均衡、SSL 终端等优势。配置示例：location /api/ { proxy_pass http://backend:8080/; }",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-009",
+      "type": "fill_blank",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "Vite",
+        "开发代理"
+      ],
+      "question": "Vite 开发服务器中通过 server.proxy 配置反向代理时，需要设置 ____: true 使得代理请求的 Host 头与目标服务器一致，避免目标服务器返回错误。",
+      "answer": [
+        "changeOrigin",
+        "change_origin"
+      ],
+      "answer_rule": "any",
+      "explanation": "Vite 的开发代理基于 http-proxy-middleware。changeOrigin: true 会将请求头中的 Host 字段修改为目标服务器的 host，这样目标服务器收到的请求就像直接发给自己一样。例如前端请求 localhost:3000/api/users，代理到 backend:8080，如果不开 changeOrigin，Host 头仍是 localhost:3000，后端可能无法正确路由。配置示例：proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } }",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "fb-010",
+      "type": "fill_blank",
+      "difficulty": 4,
+      "tags": [
+        "CORS",
+        "CSRF",
+        "同源策略",
+        "安全"
+      ],
+      "question": "同源策略在安全方面的一个重要作用是防止____攻击：恶意网站无法直接读取用户在银行网站的 Cookie，因此无法伪造合法请求来冒充用户向银行服务器发送转账指令。",
+      "answer": [
+        "CSRF",
+        "跨站请求伪造"
+      ],
+      "answer_rule": "any",
+      "explanation": "CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种利用用户已登录状态发起恶意请求的攻击。虽然同源策略能阻止恶意网站读取银行网站的响应数据，但仅靠同源策略并不能完全防御 CSRF——因为同源策略只限制'读'，不完全限制'写'（如表单提交、图片标签等仍可触发跨源请求）。完整防御 CSRF 还需要 CSRF Token、SameSite Cookie 属性等额外机制。同源策略是第一道防线，但不是唯一防线。",
+      "source": null,
+      "related": []
+    }
+  ]
+}
@@ -0,0 +1,43 @@
+{
+  "slug": "cors",
+  "name": "Cors",
+  "description": "",
+  "tags": [
+    "Access-Control-Allow-Credentials",
+    "CORS",
+    "CSRF",
+    "Cookie",
+    "Nginx",
+    "OPTIONS",
+    "Origin",
+    "Vite",
+    "WebSocket",
+    "反向代理",
+    "同源策略",
+    "安全",
+    "开发代理",
+    "开发环境",
+    "浏览器安全",
+    "简单请求",
+    "跨域",
+    "跨源请求",
+    "预检请求"
+  ],
+  "difficulty_range": [
+    2,
+    4
+  ],
+  "schema_version": "1.0.0",
+  "updated": "2026-09-02",
+  "question_files": [
+    "single_choice",
+    "fill_blank"
+  ],
+  "stats": {
+    "total": 20,
+    "by_type": {
+      "single_choice": 10,
+      "fill_blank": 10
+    }
+  }
+}
@@ -0,0 +1,209 @@
+{
+  "topic": "cors",
+  "type": "single_choice",
+  "schema_version": "1.0.0",
+  "generated": "2026-09-02T21:20:00+08:00",
+  "questions": [
+    {
+      "id": "sc-001",
+      "type": "single_choice",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "同源策略"
+      ],
+      "question": "浏览器同源策略判断跨域的标准是什么？",
+      "options": {
+        "A": "是否同一台服务器",
+        "B": "协议 + 域名 + 端口三元组是否完全一致",
+        "C": "是否同一网段",
+        "D": "是否使用相同浏览器"
+      },
+      "answer": "B",
+      "explanation": "源（Origin）= 协议 + 域名 + 端口。三者必须完全一致才算同源，任何一个不一样就是跨域，浏览器会拦截。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-002",
+      "type": "single_choice",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "预检请求"
+      ],
+      "question": "浏览器在什么情况下会发送 OPTIONS 预检请求？",
+      "options": {
+        "A": "GET 请求",
+        "B": "POST 请求",
+        "C": "PUT/DELETE/自定义 Header 等非简单请求",
+        "D": "所有请求"
+      },
+      "answer": "C",
+      "explanation": "简单请求（GET/POST/HEAD + 简单 Header）浏览器直接发，看响应头判断。预检请求（PUT/DELETE/自定义 Header 等）浏览器先发 OPTIONS 探路，确认安全后才发真正请求。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-003",
+      "type": "single_choice",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "Access-Control-Allow-Origin"
+      ],
+      "question": "Access-Control-Allow-Origin: * 同时带 Cookie 时会怎样？",
+      "options": {
+        "A": "正常工作",
+        "B": "浏览器会拒绝",
+        "C": "Cookie 自动删除",
+        "D": "请求自动重试"
+      },
+      "answer": "B",
+      "explanation": "当请求携带凭据（Cookie、HTTP Auth）时，Access-Control-Allow-Origin 不能是通配符 *，必须是具体的源。这是为了防止任意网站都能通过你浏览器里的 Cookie 访问受保护资源。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-004",
+      "type": "single_choice",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "同源"
+      ],
+      "question": "http://localhost:3000 和 http://localhost:8080 是否同源？",
+      "options": {
+        "A": "同源",
+        "B": "跨域",
+        "C": "取决于浏览器",
+        "D": "取决于协议"
+      },
+      "answer": "B",
+      "explanation": "端口不同（3000 ≠ 8080）就是跨域。前后端分离开发时极其常见，前端在 3000 端口，后端 API 在 8080 端口。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-005",
+      "type": "single_choice",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "WebSocket"
+      ],
+      "question": "WebSocket 不受同源策略限制的原因是什么？",
+      "options": {
+        "A": "WebSocket 使用 UDP",
+        "B": "WebSocket 连接一旦建立就是全双工通信，不受 CORS 限制",
+        "C": "WebSocket 自带加密",
+        "D": "WebSocket 不经过浏览器"
+      },
+      "answer": "B",
+      "explanation": "WebSocket 连接一旦建立就是全双工通信，不受 CORS 限制。但建立连接的握手阶段（HTTP Upgrade 请求）仍然受同源策略影响。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-006",
+      "type": "single_choice",
+      "difficulty": 4,
+      "tags": [
+        "CORS",
+        "Nginx"
+      ],
+      "question": "生产环境中解决跨域最常用的方式是什么？",
+      "options": {
+        "A": "前端开发代理",
+        "B": "Nginx 反向代理",
+        "C": "后端设置 CORS 响应头",
+        "D": "使用 WebSocket"
+      },
+      "answer": "B",
+      "explanation": "生产环境中 Nginx 反向代理是最常用的方式。前端请求 app.example.com/api/，Nginx 代理到后端 localhost:8080，对浏览器来说是同源。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-007",
+      "type": "single_choice",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "预检请求"
+      ],
+      "question": "网络面板里一个请求出现两次，第一次是什么？",
+      "options": {
+        "A": "重试请求",
+        "B": "OPTIONS 预检请求",
+        "C": "缓存验证",
+        "D": "DNS 解析"
+      },
+      "answer": "B",
+      "explanation": "网络面板里一个请求出现两次，第一次是 OPTIONS 预检请求，不是 bug。浏览器先发 OPTIONS 探路，确认允许后才发真正请求。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-008",
+      "type": "single_choice",
+      "difficulty": 2,
+      "tags": [
+        "CORS",
+        "同源"
+      ],
+      "question": "https://app.example.com 和 https://api.example.com 是否同源？",
+      "options": {
+        "A": "同源",
+        "B": "跨域",
+        "C": "取决于端口",
+        "D": "取决于协议"
+      },
+      "answer": "B",
+      "explanation": "子域名不同（app.example.com ≠ api.example.com）就是跨域。即使在同一台服务器上，子域名不同也属于跨域。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-009",
+      "type": "single_choice",
+      "difficulty": 4,
+      "tags": [
+        "CORS",
+        "同源策略",
+        "安全"
+      ],
+      "question": "同源策略防止的攻击场景是什么？",
+      "options": {
+        "A": "DDoS 攻击",
+        "B": "恶意网站冒充用户向银行发起请求",
+        "C": "SQL 注入",
+        "D": "XSS 攻击"
+      },
+      "answer": "B",
+      "explanation": "同源策略防止的典型场景：你登录了银行网站（bank.com），浏览器存了 cookie，然后访问恶意网站（evil.com），evil.com 试图请求 bank.com/api/transfer 冒充你转账。同源策略会拦截这个请求。",
+      "source": null,
+      "related": []
+    },
+    {
+      "id": "sc-010",
+      "type": "single_choice",
+      "difficulty": 3,
+      "tags": [
+        "CORS",
+        "Vite"
+      ],
+      "question": "Vite 开发服务器中 server.proxy 配置的作用是什么？",
+      "options": {
+        "A": "加速构建",
+        "B": "将 /api 请求代理到后端，浏览器看到的请求始终在同源",
+        "C": "压缩代码",
+        "D": "热更新"
+      },
+      "answer": "B",
+      "explanation": "Vite 的 server.proxy 将 /api 请求代理到后端（如 localhost:8080），浏览器看到的请求始终在 localhost:3000，同源，不触发跨域。changeOrigin: true 修改请求头中的 Host 为目标地址。",
+      "source": null,
+      "related": []
+    }
+  ]
+}