Nginx需在OPTIONS预检响应中设置紧凑格式的Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS，并用if判断拦截OPTIONS请求返回204，同时主请求响应也须携带Access-Control-Allow-Origin和Access-Control-Allow-Credentials。

要让前端能跨域发起 PUT 和 DELETE 请求，Nginx 必须在 预检响应（OPTIONS） 中正确设置 Access-Control-Allow-Methods，且该头必须明确包含 PUT,DELETE，同时配合其他 CORS 头协同生效。

---

明确声明允许的 HTTP 方法

Access-Control-Allow-Methods 是浏览器预检阶段校验的关键响应头。它必须是一个逗号分隔、不含空格的字符串（如 GET,POST,PUT,DELETE,OPTIONS），且值需与后端实际支持的方法严格一致。

常见错误写法：
❌ GET, POST, PUT, DELETE（含空格，部分旧浏览器会解析失败）
✅ GET,POST,PUT,DELETE,OPTIONS（紧凑格式更稳妥）

配置示例：

add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,OPTIONS' always;

---

必须配合 OPTIONS 请求的特殊处理

仅靠 add_header 不够——因为 OPTIONS 请求不能转发给后端（否则可能 405 或 502），必须由 Nginx 立即响应 204，并在响应中带上完整 CORS 头。

推荐写法（放在对应 location 块内）：

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,X-Requested-With';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Length' 0;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    return 204;
}

⚠️ 注意：Access-Control-Allow-Origin 若设为 *，则 Access-Control-Allow-Credentials 必须为 false；若前端带 cookie（withCredentials: true），这里必须写具体域名，不能用 *。

---

确保主请求也携带对应头（非预检阶段）

除 OPTIONS 外，正常 PUT/DELETE 请求的响应中，仍需返回 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials（如有需要），否则浏览器可能拒绝读取响应体。

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

可在同一 location 块中统一添加：

add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;

always 参数确保即使返回 4xx/5xx 状态码也携带该头（避免被忽略）。

---

验证是否生效

前端发起 fetch('/api/user/123', { method: 'PUT', credentials: 'include' }) 后：

• 浏览器先发 OPTIONS 请求 → 查看响应头是否含 Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
• 再发真实 PUT 请求 → 查看响应头是否含 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials

可用 curl 模拟预检：

curl -H "Origin: https://your-frontend.com" \
     -H "Access-Control-Request-Method: PUT" \
     -H "Access-Control-Request-Headers: Content-Type,Authorization" \
     -X OPTIONS -I http://your-nginx-domain/api/user/123

响应中应包含全部所需 CORS 头，状态码为 204。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！