Nginx开启Gzip压缩

引言

HTML、CSS、JS、JSON这类文本资源直接传输体积大，首屏慢。Nginx开启Gzip后，服务端先压缩再发送，浏览器解压，通常文本体积能减少60%以上，是零成本提升访问速度的手段。

配置示例

在http块或server块加入：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

参数说明

• gzip on：开关；
• gzip_min_length：小于1k不压缩，避免小文件压缩得不偿失；
• gzip_comp_level：压缩等级1-9，6比较均衡，太高CPU占用大；
• gzip_types：指定压缩的MIME类型，text/html默认自带；
• gzip_vary on：响应加Vary:Accept-Encoding，避免缓存问题；
• gzip_disable：兼容老旧IE浏览器。

生效验证

改完执行nginx -t检查语法，再reload。浏览器F12网络面板看响应头Content-Encoding:gzip即生效。

注意事项

• 图片、视频、PDF本身已压缩，不要再gzip，浪费CPU；
• 压缩等级不要盲目拉满，大文件压缩吃CPU；
• 静态资源可在CDN层提前压缩；
• 配合Brotli现代压缩效果更好，需Nginx额外模块支持。

总结

Gzip是文本类资源提速标配，开启后配置类型、大小阈值、合理压缩等级，reload生效，用响应头验证。不压缩图片视频，平衡传输体积与服务器CPU。

JS跨域CORS方案

引言

浏览器同源策略要求协议、域名、端口完全一致，前端页面访问另一个域名的接口就会被拦截报跨域错误。CORS是目前最标准、主流的跨域解决方式，由后端配合响应头放行。

什么是同源策略

三个任意一项不同都算跨域：

• 协议不同（http/https）；
• 域名不同；
• 端口不同。

CORS后端响应头（PHP）

<?php
header('Access-Control-Allow-Origin: https://www.example.com');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,Authorization');
header('Access-Control-Allow-Credentials: true');

携带cookie时Allow-Origin不能写*，必须指定具体域名，且前端请求withCredentials为true。

预检请求OPTIONS

POST JSON等复杂请求，浏览器会先发OPTIONS预检，后端要直接放行OPTIONS，返回204，否则正式请求发不出去。

其他常见跨域方式对比

• JSONP：只支持GET，老旧方案；
• Nginx反向代理：前端请求同源nginx，由nginx转发接口，无浏览器跨域；
• 开发环境代理：Vite、Webpack devServer proxy临时解决。

注意事项

• 生产不要用*放开所有来源；
• 区分简单请求和预检请求；
• 配合cookie要带Credentials并指定来源；
• 接口服务端做好来源校验。

总结

CORS是前后端分离首选方案，核心是后端设置允许来源、方法、响应头。复杂请求先处理OPTIONS预检，带cookie时指定具体域名，安全可控，比JSONP和代理更规范。