1024创新实验室-公告

重磅更新:支持国产数据库🎉🎉

支持:达梦、人大金仓、华为高斯GaussDB 等🎉🎉


抖音关注【六边形工程师-卓大】🎉🎉

和1024创新实验室一起,热爱代码,热爱生活,永远年轻,永远前行🎉🎉


Skip to content

完整Nginx配置分享

SmartAdmin预览环境配置分享

vim
server {
	listen 80;
    listen 443 ssl;
    server_name  preview.smartadmin.vip;
	
	# 配置https证书
    ssl_certificate /home/ssl/smartadmin.vip/smartadmin.vip.pem;
    ssl_certificate_key /home/ssl/smartadmin.vip/smartadmin.vip.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

	# 配置 gzip 压缩
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 3;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    # 禁用 OPTIONS 请求
    if ($request_method ~* OPTIONS) {
        return 403;
    }

    # 前端 配置
    location / {
        alias /home/smart-admin-v3-preview/dist/;
        try_files $uri $uri/ /index.html last;
        index  index.html;
        expires -1;
    }
    
    # 后端api配置
    location /smart-admin-api/ {
        
        #反向代理的java地址
         proxy_pass  http://127.0.0.1:1024/smart-admin-api/;
         proxy_redirect    off;

         #设置代理消息头
         proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for; 
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  Host $http_host;
         
         #设置没有缓存[此处很重要,必须设置,不然有些浏览器对get请求会缓存,引发不必要的bug]
         expires -1;
         
         #一些安全配置
         add_header Set-Cookie "Path=/; HttpOnly; Secure";
         add_header X-Content-Type-Options "nosniff";
         add_header X-XSS-Protection "1; mode=block";

          #设置跨域方法
      	 add_header X-Frame-Options "ALLOW-FROM preview.smartadmin.vip";
   	     add_header Content-Security-Policy "frame-ancestors preview.smartadmin.vip";
    }
    
    # 后端api swagger和knife4j配置
    location /v3/api-docs/ {
		 proxy_pass  http://127.0.0.1:1024/smart-admin-api/v3/api-docs/;
		 proxy_redirect    off;
		 proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
		 proxy_set_header  X-Real-IP  $remote_addr;
		 proxy_set_header  Host $http_host;
		 add_header X-Frame-Options "ALLOW-FROM preview.smartadmin.vip";
		 add_header Content-Security-Policy "frame-ancestors preview.smartadmin.vip";
		 expires -1;
	}
    
}

网友配置分享

感谢 @imajinyun大佬分享的 nginx 的配置

vim
server {
  listen 80;
  listen [::]:80;
  
  server_name api.xxx.com;
  access_log /www/wwwlogs/api.xxx.com.log combined;
  error_log /www/wwwlogs/api.xxx.com.err;
  index index.html index.htm;
  root /www/wwwroot/your-project/smart-web/dist;

  client_body_timeout 60s;
  client_header_timeout 60s;
  client_max_body_size 20m;

  add_header Referrer-Policy 'origin' always;
  add_header Content-Security-Policy "default-src 'self' *.xxx.com data: https: 'unsafe-inline'; frame-ancestors 'self' *.xxx.com" always;
  add_header X-Content-Type-Options "nosniff";
  add_header X-Download-Options noopen;
  add_header X-Frame-Options "ALLOW-FROM *.xxx.com";
  add_header X-XSS-Protection "1; mode=block";
  add_header X-Permitted-Cross-Domain-Policies none;
  add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
  add_header Set-Cookie "Path=/; HttpOnly; Secure";
  add_header Access-Control-Allow-Origin '*.xxx.com';
  add_header Access-Control-Allow-Credentials 'true';
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

  error_page 404 /404.html;
  error_page 502 /502.html;

  location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|swf|flv|mp4)$ {
    valid_referers none blocked *.xxx.com api.xxx.com;
    if ($invalid_referer) {
      return 403;
    }
  }

  location / {
    expires epoch;
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    proxy_pass http://127.0.0.1:1024/api/;
    proxy_redirect off;
    proxy_buffering off;

    expires -1;

    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
  }

  location /wechat/xxx.txt {
    default_type text/html;
    return 200 "xxxxx";
  }

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }

  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

  location ~ /(\.user\.ini|\.ht|\.git|\.svn|\.project|LICENSE|README\.md) {
    deny all;
    return 403;
  }

  location /.well-known {
    allow all;
  }
}

nginx 跨域配置

感谢 叶知秋 分享的nginx跨域配置和相关说明。

1、了解跨域问题

在SmartAdmin部署过程中,前端与后端分属不同域名或端口时,浏览器会因同源策略限制而阻止请求。这种限制源于浏览器的安全机制——同源策略(Same-Origin Policy),它规定只有协议、域名和端口都相同的资源才能被访问。 为解决这一问题,我们可以通过配置Nginx支持CORS(跨域资源共享)。CORS是一种基于HTTP头的机制,允许服务器明确指定哪些来源(域名)可以访问其资源。

2、配置Nginx以支持CORS

以下是具体步骤:

  • 编辑Nginx配置文件,通常位于/etc/nginx/nginx.conf/etc/nginx/sites-available/default
  • 在反向代理相关的location块中添加必要的跨域头信息
  • 重启Nginx服务以使更改生效

2.1、示例配置

cnf
server {
    listen 80;
    server_name your-domain.com;
 
    location /api/ {
        proxy_pass http://backend-server:8080/;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
 
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
            add_header Access-Control-Allow-Headers "Content-Type, Authorization";
            return 204;
        }
    }
}

2.2、解释关键配置项

配置项 作用

  • add_header Access-Control-Allow-Origin * 允许所有来源访问。若需提高安全性,可将*替换为特定域名,如https://smartadmin.vip
  • add_header Access-Control-Allow-Methods 设置允许的HTTP方法,例如GET、POST等。
  • add_header Access-Control-Allow-Headers 定义允许的自定义头部字段,如Authorization。

3. 分析与验证

完成配置后,需要验证是否成功解决跨域问题。可以通过以下方式测试:

  • 使用Postman或cURL工具发送请求,检查响应头是否包含正确的CORS信息。

  • 在浏览器开发者工具中查看网络请求,确认跨域请求是否正常工作。

  • sequenceDiagram participant Browser participant Nginx participant Backend

  • Browser->>Nginx: 发起跨域请求

  • Nginx->>Backend: 反向代理到后端

  • Backend-->>Nginx: 返回响应

  • Nginx-->>Browser: 带有CORS头的响应

4. 高级优化建议

虽然上述配置解决了基本的跨域问题,但为了进一步提升系统安全性和性能,可以考虑以下几点:

  • 限制允许的来源域名,避免使用通配符*。
  • 启用HTTPS以保护数据传输的安全性。
  • 使用缓存策略减少重复请求,提升响应速度。