随笔分类 - 问题思考
摘要：在 Vidstack 和 Media Chrome 之间进行选型，本质上是在选择 “全功能播放器解决方案” 还是 “底层控件构建基元”。 两者都基于现代 Web 标准（Web Components / Custom Elements），但定位截然不同。以下是详细的对比分析和选型建议： 1. 核心定位
阅读全文
摘要：Remotion 是一个开源的 React 框架，它的核心理念是 “用代码程序化地制作视频” (Make videos programmatically)。 简单来说，它允许开发者使用熟悉的 React、TypeScript、CSS 等 Web 技术栈来创建、编辑和渲染真实的 MP4 视频文件，而无
阅读全文
摘要：Nginx 本身对 Content-Length 响应头没有硬性长度限制，但其处理大响应体（即大文件或大数据流）时，会受到若干内部缓冲区和配置参数的间接限制。这些限制可能影响大文件下载、流式响应等场景。 下面详细说明 Nginx 与 Content-Length 相关的行为、潜在限制及如何调整。 ✅
阅读全文
摘要：<a> 标签配合 download 属性是前端触发文件下载的常用方式，但它存在一些重要的局限性，在实际开发中需要特别注意。以下是详细分析： ✅ 基本用法回顾 <a href="/path/to/file.pdf" download="report.pdf">下载</a> 或 JavaScript 动
阅读全文
摘要：在前后端协作实现文件下载功能时，选择 传递 URL 还是 流式返回文件内容，取决于具体场景、安全需求、性能要求以及架构设计。以下是两种方式的详细对比和适用场景建议： 一、传递 URL（前端直接请求文件地址） ✅ 优点： 简单高效：后端只需返回一个可访问的 URL（如 CDN 地址、OSS 预签名 U
阅读全文
摘要：101 并不是一个网络“梗”（meme），而是一个源自北美教育体系的通用术语，后来被科技界、学术界广泛沿用，用来指代"入门课程"或"基础知识"。 1. 起源：大学课程编号 在美国和加拿大的大学中，课程通常用“学科代码 + 三位数字”来命名： 第一位数字代表年级或难度等级。 1xx（如 101, 10
阅读全文
摘要：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 头
阅读全文
浙公网安备 33010602011771号