Nginx在前后端分离中的作用以及对比

前端(Vue) → 直接请求 → Spring Boot后端

前端(Vue) → Nginx → Spring Boot后端
	↑	 ↑
静态资源		反向代理

// vue.config.js
devServer: {
	proxy: {
		'/api': {
			target: 'http://localhost:8080', // 直接连Spring Boot
			changeOrigin: true
		}
	}
}

# nginx.conf
server {
	listen 80;
	server_name example.com;
	
	# 1. 服务Vue静态文件
	location / {
		root /var/www/vue-app;
		index index.html;
		try_files $uri $uri/ /index.html; # 支持Vue Router history模式
	}
	
	# 2. 反向代理API请求
	location /api/ {
		proxy_pass http://backend-server:8080/;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		# 跨域配置
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,Content-Type';
		
		# 缓存配置
		proxy_cache my_cache;
		proxy_cache_valid 200 302 10m;
	}
	
	# 3. 负载均衡配置
	upstream backend-server {
		server 192.168.1.101:8080 weight=3; # 权重负载
		server 192.168.1.102:8080 weight=2;
		server 192.168.1.103:8080 backup;# 备用服务器
	}
	
	# 4. 性能优化
	gzip on;# 开启压缩
	gzip_types text/plain application/javascript application/json;
}

# Nginx解决跨域（无需修改后端代码）
location /api/ {
	proxy_pass http://localhost:8080/api/;
	add_header Access-Control-Allow-Origin $http_origin always;
	add_header Access-Control-Allow-Credentials true always;
	add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,OPTIONS' always;
	
	# 处理OPTIONS预检请求
	if ($request_method = 'OPTIONS') {
		return 204;
	}
}

# Nginx高效服务静态资源（优于Spring Boot）
location /static/ {
	root /var/www/vue-app;
	expires 30d;# 缓存30天
	access_log off;
	
	# 启用gzip压缩
	gzip_static on;
}

# 安全配置（Nginx层面）
server {
	# 隐藏服务器信息
	server_tokens off;
	
	# 限制请求大小
	client_max_body_size 10m;
	
	# 限流
	limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
	
	location /api/ {
	limit_req zone=api burst=20 nodelay;
		proxy_pass http://backend:8080;
	}
}