需求
有一个3d在线渲染的网页 ,https://antimatter15.com/splat/?url=truck.splat ,现希望在该网页中,将本地的点云文件放到url中,在该网页中渲染点云
问题
该网页如果想要获取本地的文件,涉及到跨域问题;另外由于是https请求,为了使请求协议保持一致,需要额外配置ssl。(一个通过 HTTPS 加载的页面不能请求通过 HTTP 加载的资源。这种情况下,被称为“混合内容”问题。)
两种解决办法:
1、搭建https-server服务
下载 OpenSSL:
访问 OpenSSL Windows 下载页面:
Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions
安装参考文章:
生成ssl证书
openssl req -nodes -new -x509 -keyout server.key -out server.cert
# 国家、地区、公司名称等信息,可以随意填写。
启动 http-server
使用 HTTPS启动,解决混合内容
http-server . -p 8080 --cors --ssl --cert server.cert --key server.key
# cors:http-server 的 --cors 选项可以开启跨域资源共享,但它的功能相对简单,只是允许所有源访问。这对于简单的开发和测试场景通常已经足够。
# 端口:8080
注意:如果server.key、server.cert以及资源目录可以放在同一个文件夹,且终端是在该文件夹打开的,则用上面的命令即可;否则需要配置好这几个文件的目录
2、nginx中配置
下载nginx
若无nginx,则需要下载,根据操作系统命令有所不同
下载openssl
同上
生成ssl证书
同上
配置 Nginx SSL
打开 Nginx 配置文件 nginx.conf,通常位于 C:\nginx\conf\nginx.conf。
在 http 部分内添加以下配置:
# 根据实际情况调整 ssl_certificate 和 ssl_certificate_key 路径,以及 root 路径。
server {
listen 8000 ssl; # 监听 HTTPS 请求的端口号
server_name localhost;
ssl_certificate /etc/nginx/server.crt; # 替换为实际的 SSL 证书路径
ssl_certificate_key /etc/nginx/server.key; # 替换为实际的 SSL 私钥路径
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
root /home/your_user/splat_files; # 将此处的路径替换为存放 .splat 文件的实际路径
autoindex on; # 启用目录索引,以便浏览文件列表
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html; # 错误页面文件路径
}
}
启动 Nginx
nginx -s reload
nginx配置跨域
server {
listen 8000 ssl;
server_name localhost;
ssl_certificate C:/Users/SGD/Desktop/temp/plydianyun/server.cert;
ssl_certificate_key C:/Users/SGD/Desktop/temp/plydianyun/server.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
root C:/Users/SGD/Desktop/temp/plydianyun;
autoindex on;
# CORS headers
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root C:/nginx/html;
}
}
重启 Nginx
nginx -s reload
易混淆:
1、为什么http-server不涉及跨域,nginx涉及
其实都涉及跨域。
http-server 是一个简易的静态文件服务器,用于快速启动一个本地开发服务器。默认情况下,它并不处理跨域请求。需要手动配置 CORS 头来允许跨域请求。
2、处理 CORS的不同:
http-server 的 --cors 选项可以开启跨域资源共享,但它的功能相对简单,只是允许所有源访问。这对于简单的开发和测试场景通常已经足够。
如果你需要更复杂的 CORS 配置(如限制特定源、设置不同的允许方法或头部),http-server 可能不够灵活,更多的定制可能需要使用其他工具或中间件。
Nginx:Nginx 是一个功能丰富的 Web 服务器和反向代理服务器,它提供了全面的配置选项,可以用来处理复杂的 HTTP 请求和响应。
Nginx如何处理 CORS:细粒度控制:Nginx 提供了详细的配置选项来设置 CORS 头部,包括允许的源、方法和头部等。