nginx前端部署配置参数

### Nginx 前端部署配置参数最佳实践

#### 优化性能与安全性的配置实例

对于前端应用的部署，Nginx 提供了一系列配置选项来确保最优的服务质量。当处理静态资源如HTML、CSS 和 JavaScript 文件时，合理的缓存策略能显著减少响应时间并减轻服务器负担。

http {
    ...
    server {
        listen       80;
        server_name  frontend.example.com;

        location / {
            root   /var/www/html/dist; # Vue 构建后的项目路径
            try_files $uri $uri/ /index.html;
        }

        # 启用Gzip压缩以加快传输速度
        gzip on;
        gzip_types text/plain application/xml text/css application/javascript;
        
        # 设置浏览器缓存过期时间
        expires max;
        add_header Cache-Control "public";

        # 安全头部设置防止XSS攻击等风险
        add_header X-Frame-Options SAMEORIGIN;
        add_header X-Xss-Protection "1; mode=block";
        add_header X-Content-Type-Options nosniff;
    }
}

此段代码展示了如何针对前端应用程序调整Nginx的行为[^2]。`try_files`指令确保即使URL指向不存在的具体文件也能正确返回单页应用的内容；而启用Gzip则有助于减小网络负载，提高页面加载效率。

#### 处理跨域资源共享(CORS)

为了使不同源之间的API调用成为可能，在某些情况下需要适当放宽同源政策限制：

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }
    
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }
}

上述片段说明了怎样通过自定义HTTP头信息允许来自任意域名(`*`)的请求访问指定位置下的接口数据，并支持预检请求(PREFLIGHT)，从而实现CORS机制[^3]。