Nginx配置解决跨域以及可替换的方法

Mr_Dong1217

于 2024-09-01 17:21:43 发布

阅读量882

点赞数 6

文章标签： nginx 前端

本文链接：https://blog.csdn.net/Mr_Dong1217/article/details/141786754

版权

需求

有一个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

安装参考文章：

windows安装openssl

生成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;
    }
}