使用 Nginx 轻松处理跨域请求（CORS）

Zhang青山2025-11-02 8:04

使用Nginx轻松处理跨域请求（CORS）🌐✨

跨域资源共享（CORS）是现代Web开发中常见的挑战，但通过Nginx配置，我们可以轻松解决这个问题！🚀

为什么需要CORS？🤔

当你的前端应用（如`http://localhost:3000`）尝试访问不同域（如`http://api.example.com`）的资源时，浏览器出于安全考虑会阻止这种请求。这就是CORS机制的作用。

Nginx解决方案💡

只需在Nginx配置中添加几个指令，就能优雅地解决跨域问题：

```nginx
server{
listen80;
server_nameapi.example.com;

location/{
允许的源域名
add_header'Access-Control-Allow-Origin''http://localhost:3000';

允许的HTTP方法
add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS,PUT,DELETE';

允许的请求头
add_header'Access-Control-Allow-Headers''Content-Type,Authorization';

允许浏览器缓存CORS配置（秒）
add_header'Access-Control-Max-Age'1728000;

处理预检请求(OPTIONS)
if($request_method='OPTIONS'){
return204;
}

你的其他代理配置...
proxy_passhttp://backend;
}
}
```

进阶配置🛠️

如果需要允许多个域名，可以使用变量：

```nginx
map $http_origin$ cors_origin{
default"";
"~^https?://(localhost|example.com|app.example.com)"$http_origin;
}

server{
...其他配置

add_header'Access-Control-Allow-Origin'$cors_origin;
add_header'Access-Control-Allow-Credentials''true';
}
```

验证配置✅

配置完成后，别忘了测试：
```bash
nginx-t测试配置语法
nginx-sreload重新加载配置
```

现在你的API就可以安全地被跨域访问啦！🎉记得根据实际需求调整配置，保持安全性和功能性的平衡。🔒➡️🔓