随笔分类 - 问题思考
摘要：OPTIONS 请求是 HTTP 协议中的一种方法，主要用于 CORS（跨域资源共享） 机制中的 “预检请求”（Preflight Request）。 简单来说，它的作用是：浏览器在发送真正的跨域请求（如 POST、PUT、DELETE）之前，先向服务器“打听”一下：“我能不能发这个请求？你允许我用
阅读全文
摘要：nginx 中的 add_header 指令是 向 HTTP 响应头（Response Headers）中添加自定义头部字段，也就是说： ✅ add_header 是给「客户端」（如浏览器、curl、App 等）返回的响应添加 header 的。 📌 举个例子 server { listen 80
阅读全文
摘要：'Accept-Encoding', 'identity' 的作用是强制服务器发送未压缩的原始数据。 详细解释 含义： Accept-Encoding 是 HTTP 请求头，告诉服务器客户端支持哪些内容编码（压缩）格式。 identity 是一个特殊值，代表“无编码”或“原始数据”。 当设置为 Ac
阅读全文
摘要：字节范围 bytes=10485760-15421231，计算 Content-Length 的公式为： Content-Length = 结束字节 - 开始字节 + 1 数学计算： 开始字节：10485760 结束字节：15421231 Content-Length = 15421231 - 10
阅读全文
摘要：MP4、WebM、MKV、MOV、AVI 这些都是视频文件的容器格式（也称为封装格式，container format）。 什么是容器格式？ 容器格式是一种文件格式，用于将视频流、音频流、字幕、元数据等多种内容打包到一个文件中。它本身不决定视频或音频的编码方式，而是规定了这些数据如何被组织和存储。
阅读全文
摘要：“Data URL” 和 “Base64” 经常被混用，但它们不是同一概念，而是包含关系：Base64 是一种编码方式，Data URL 是一种 URI 格式，它可以使用 Base64 编码来嵌入数据。 下面从定义、结构、用途和区别四个方面清晰解释： ✅ 1. Base64 是什么？ 本质：一种将二
阅读全文
摘要：File.prototype.stream() 和 ReadableStream.getReader()，这是现代 Web Streams API 的一部分。 虽然功能强大（支持流式处理大文件、低内存占用），但它的浏览器兼容性比 file.arrayBuffer() 更晚，需谨慎评估目标环境。 ✅
阅读全文
摘要：File.prototype.arrayBuffer() 是现代浏览器中用于将 File（或 Blob）对象异步读取为 ArrayBuffer 的原生方法，相比传统的 FileReader.readAsArrayBuffer() 更简洁、基于 Promise，且性能更好。 ✅ 浏览器兼容性（截至 2
阅读全文
摘要：URL.createObjectURL(file) 与 FileReader.readAsDataURL(file) 都可用于在浏览器中生成本地文件的可访问 URL（例如用于图片/视频预览）， 但它们在实现机制、性能、内存占用和适用场景上有本质区别。以下是详细对比与最佳实践建议： 🔍 核心对比 特
阅读全文
摘要：系统地梳理一下 FileReader 的几种读取方式在本质区别、使用场景和性能表现上的差异： 📌 FileReader 四种主要读取方法对比 方法 返回值类型 适用场景 性能/注意事项 readAsText(file, encoding?) string 纯文本（如 .txt, .json, .c
阅读全文
摘要：除了 Access-Control-Allow-Origin，服务器通常还需要设置以下关键响应头来完整支持CORS： 必需头 Access-Control-Allow-Methods 定义允许的HTTP方法（如 GET, POST, PUT, DELETE, OPTIONS）。 示例：Access-
阅读全文
摘要：在标准 Web 安全策略下，前端无法直接修改 fetch 请求的 Origin 请求头。Origin 是由浏览器自动生成并添加的，其值由请求的协议、域名和端口决定，开发者无法通过 JavaScript 直接覆盖或修改。 关键限制： 浏览器控制：Origin 属于 禁止修改的请求头（forbidden
阅读全文
摘要：不一定。仅设置： add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; 并不能保证预检请求（OPTIONS）会返回 200，原因如下： ❌ 问题核心：Nginx 默认不会处理 OPTIONS 请求 在 Nginx
阅读全文
摘要：浏览器跨域与同源策略 🔒 跨域问题源于浏览器的同源策略，目的是保障用户安全，脱离浏览器环境（如服务器间通信）不存在跨域 🌐 “同源”指两个 URL 的协议、域名、端口完全相同，路径不同不影响同源判断 ⚠️ 跨域请求仍会被发送至服务器并获得响应，但浏览器在校验响应头后若不通过（如缺少 CORS 头
阅读全文
摘要：浏览器在发送 跨域请求（CORS 请求） 时，某些特定条件下会先发送一个 预检请求（Preflight Request），这是一个 OPTIONS 方法的 HTTP 请求，用于询问服务器是否允许即将发送的实际请求。 ✅ 浏览器不会发送预检请求的情况（“简单请求”） 只有满足以下所有条件的请求才是 简
阅读全文
摘要：即使服务器设置了 Access-Control-Allow-Origin: *，浏览器仍报跨域错误，根本原因通常是：CORS 配置不完整 + 浏览器安全策略的严格校验。以下是高频原因与精准排查方案： 🔍 高频原因速查表（按发生概率排序） 排名 原因 浏览器典型报错关键词 解决方案 🥇 1 请求携
阅读全文
摘要：这是一个在前后端分离架构中非常常见的设计争议点。简单来说，这种“完全原子化”的设计有其合理性，但也带来了显著的前端开发复杂度，需要根据具体场景来评判是否“合理”。 下面我们从正反两面和最佳实践来详细分析。 一、为什么后端会这样设计？（合理性 / 优点） 接口复用性极高 每个接口只做一件事，功能纯粹。
阅读全文
摘要：在 JSDoc 中，@function 和 @description 是完全不同的两类标签，作用维度截然不同： ✅ 核心区别速览 标签 类型 作用 是否必需 典型位置 @function 结构标签（声明“这是什么”） 显式声明标识符为函数，解决解析器识别问题 ❌ 通常不需要（现代工具可自动识别） 注
阅读全文
摘要：在 JSDoc 中，@private、@protected、@public 和 @readonly 分属两个完全不同的控制维度，且标准性与工具支持差异显著。以下是精准对比： ✅ 核心区别总览表 标签 控制维度 标准性 作用 TS 关键字 是否互斥 典型场景 @private 访问权限 ✅ JSDoc
阅读全文
摘要：在 JSDoc 中，@constant 和 @readonly 都用于表示“值不可变”，但它们的语义、使用场景和官方推荐度有重要区别。以下是详细对比： ✅ 1. @readonly 官方状态：✅ 推荐使用（JSDoc 官方当前标准） 语义： 表示该成员初始化后不应被修改，强调“只读”行为。 典型使用
阅读全文
浙公网安备 33010602011771号