移动端网站欣赏提高工作效率图片
-
现象：有个web项目，其中有调用摄像头。我部署在本地开发环境，使用 http://127.0.0.1:8000 访问项目时，可以正常调用摄像头。但在部署到远程服务器后，通过Nginx反向代理的http地址访问时，却提示：无权限访问摄像头：
-
原因：现代浏览器出于安全考虑，仅允许通过HTTPS使用摄像头功能。如果使用HTTP，除非地址是localhost，浏览器对此有特殊待遇，允许它们绕过一些安全限制。下图来自通义千问：
-
解决：把项目部署为通过https访问。为简单起见，我直接配置Nginx在HTTPS地址监听，转发至内网的http服务。见下面的配置，其中配置SSL证书的部分我只确定ssl_certificate的两行是必需的：
server {listen portA ssl;listen [::]:portA ssl;server_name localhost;ssl_certificate "/etc/pki/*********.pem";ssl_certificate_key "/etc/pki/*********.key";ssl_session_cache shared:SSL:1m;ssl_session_timeout 10m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;ssl_prefer_server_ciphers on;# 添加CSP头解决混合内容问题add_header Content-Security-Policy "upgrade-insecure-requests";# 其他安全头add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;add_header X-Frame-Options SAMEORIGIN;add_header X-Content-Type-Options nosniff;location / {proxy_pass http://127.0.0.1:****/;proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址proxy_buffering off;client_max_body_size 50m;}}
这样通过https://公网IP:portA, 就可以访问服务且正常调用摄像头了。