主要问题：如何在本地开发环境使用https
new VideoDecoder()这个浏览器API为什么只支持在https下了？竟然被刺我？
1. 浏览器安全模型要求
现代浏览器（如 Chrome、Firefox）对一些强大或敏感的 API（如 WebRTC、WebCodecs、Service Worker、WebUSB、WebBluetooth）都要求：
只能在“安全上下文（Secure Context） ”中使用，也就是：
- 通过
https://访问- 或者是本地开发环境
http://localhost（特例）
2. 防止中间人攻击
视频解码、硬件访问等底层功能如果在非加密环境中暴露，容易被中间人攻击（MITM），例如：
- 替换视频流内容
- 注入恶意代码或篡改行为
因此浏览器要求必须使用 HTTPS。
3. 一致性与标准化
W3C 的 Secure Contexts 标准明确要求 WebCodecs 等新 API 遵守这一机制，从而保证跨平台一致性和安全性。
本地开发时解决方案：本地启动nginx服务，通过配置nginx.conf代理到本地前端服务例如localhost:8080，来实现https协议访问。
nginx.conf内容
# 🔧 全局配置部分：
worker_processes 1; # 设置 Nginx 工作进程数（一般与 CPU 核数相等或略少）
worker_rlimit_nofile 65535; # 设置单个工作进程最大可打开的文件数（系统级优化）
pid /var/run/nginx.pid; # 指定 PID 文件路径
# ⚙️ events 块：
events {
worker_connections 1024; # 每个 worker 进程最大连接数（并发能力）
}
# 🌐 http 块：HTTP 配置、日志、Gzip、连接管理等
http {
include mime.types; # 引入 MIME 类型配置（决定文件扩展名对应的 Content——Type）
default_type application/octet-stream; # 默认响应类型为二进制流
# 📋 日志格式定义：
# 自定义日志格式名为 main，记录客户端IP、请求时间、状态码、Referer、User-Agent等
# 还包含自定义Header（如X-ParentId、X-Signature），便于调试追踪链路。
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" '
'"$http_parentId" "$http_timestamp" "$http_signature"';
# 🚀 连接 & Gzip 压缩：
sendfile on; # 开启高效文件传输（零拷贝机制）
keepalive_timeout 65; # 长连接保持时间，单位为秒
gzip on; # 开启 Gzip 压缩
gzip_comp_level 3; # 压缩等级（1-9，数字越大压缩率越高但 CPU 占用也高）
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/javascript image/jpeg image/gif image/png image/jpg;
gzip_disable "MSIE [1-6]\\."; # 禁用旧版的 Gzip，避免兼容问题
# 📦 请求体大小限制：
client_max_body_size 256M; # 客户端上传最大内容限制（如上传文件）
client_body_buffer_size 128k; # 缓存上传请求体的内存缓冲区大小
# ⌛ FastCGI 超时时间设置（非必须，但用于 PHP/应用层代理时有效）：
fastcgi_connect_timeout 1200s;
fastcgi_send_timeout 1200s;
fastcgi_read_timeout 1200s;
# 🔒 server 块：443端口HTTPS配置和反向代理规则
server {
listen 443 ssl; # 监听 443 端口并启用 SSL
server_name localhost; # 服务器域名（可改为你自己绑定的域名）
✅ SSL 配置部分
ssl_certificate /nginx/server.crt; # SSL 证书路径
ssl_certificate_key /nginx/server.key; # SSL 私钥路径
ssl_protocols TLSv1.2 TLSv1.3; # 只启用较安全的 TLS 协议
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256; # 安全加密套件
ssl_prefer_server_ciphers on; # 使用服务器端指定的加密套件
ssl_session_cache shared:SSL:10m; # 启用会话存储，提升性能
ssl_session_timeout 10m; # 会话缓存超时时间
📜 日志路径设置
access_log /var/log/nginx/system-access.log main; # 指定访问日志文件，使用 main 文件
error_log /var/log/nginx/system-error.log warn; # 指定错误日志，级别为 warn
📌 location / ：转发根路径请求到后端服务
location / {
proxy_pass http://127.0.0.1:8080; # 将所有 / 请求转发到本地8080端口（通常为后端服务）
proxy_http_version 1.1; # 使用 HTTP/1.1 协议（支持 WebSocket 等）
proxy_set_header Host $host; # 保持原始 Host
proxy_set_header X-Real-IP $remote_addr; # 获取真实客户端 IP
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme; # 协议 https/http
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 跨域请求支持
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
add_header Access-Control-Allow-Credentials true;
}
# 🧭 location /index.html ：直接返回某个 HTML 文件
location /index.html {
alias /usr/share/nginx/html/index.html; # 显式指定 index.html 路径
add_header Cache-Control no-cache; # 禁止缓存（调试用）
}
# 🧩 location ^~ /service/ ：代理另一个微服务地址
location ^~ /service/ {
proxy_pass http://10.0.7.28:20000/; # 后端服务地址
proxy_redirect off;
proxy_cookie_path / /service/; # 设置 Cookie 的路径前缀（防止跨服务冲突）
# 常规头设置
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $remote_addr;
proxy_set_header X-Forwarded-Server $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 超时时间（单位：秒）
proxy_connect_timeout 1200s;
proxy_send_timeout 1200s;
proxy_read_timeout 1200s;
}
# 🔄 location /ws ：专门处理 WebSocket 请求代理
location /ws {
proxy_pass http://192.168.11.184:5000; # WebSocket 后端服务地址
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_set_header Upgrade $http_upgrade; # 支持 WebSocket 升级
proxy_set_header Connection "upgrade"; # 必须设置 Connection 为 upgrade
}
}
}
✅ 1. 开发/测试环境：可以使用自签名证书（不被信任也没关系）
- 你可以自己生成一套 SSL 证书和私钥（使用 OpenSSL）
- 浏览器会提示“不安全”或“证书不受信任”，但你可以选择“继续访问”
- 对于内网调试、开发测试环境，这完全没问题
✅ 2. 生产环境：必须使用“受信任的”证书
-
否则用户浏览器会报“⚠️ 连接不安全”、“证书不受信任”，严重影响用户体验
-
推荐使用：
- 免费证书（如 Let's Encrypt）
- 付费证书（如阿里云、腾讯云、DigiCert 等提供的证书）
🔐 私钥说明：
- 无论证书是否可信，私钥必须与你的证书匹配
- 且 私钥必须保密，不能泄露，否则会导致中间人攻击或被冒用
