Nginx配置允许跨域
在 Nginx 中配置允许跨域(CORS,Cross-Origin Resource Sharing)是通过在响应头中添加特定的 HTTP 头来实现的。以下是详细的配置方法和示例。
1. 什么是跨域?
跨域是指浏览器从一个域名的网页去请求另一个域名的资源。出于安全考虑,浏览器默认禁止跨域请求。通过配置 CORS,可以允许特定的域名或所有域名访问资源。
2. Nginx 配置允许跨域
全局配置
在 Nginx 配置文件中,可以通过添加以下配置来允许所有域名跨域访问:
server {
listen 80;
server_name example.com;
location / {
# 允许所有域名跨域
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,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
# 处理 OPTIONS 预检请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
# 其他配置
proxy_pass http://backend;
}
}
配置说明
Access-Control-Allow-Origin
:允许跨域的域名,*
表示允许所有域名。Access-Control-Allow-Methods
:允许的 HTTP 方法(如GET
、POST
等)。Access-Control-Allow-Headers
:允许的请求头。Access-Control-Expose-Headers
:允许客户端访问的响应头。Access-Control-Max-Age
:预检请求的缓存时间(单位:秒)。OPTIONS
请求:用于处理浏览器的预检请求(Preflight Request)。
允许特定域名跨域
如果只想允许特定域名跨域,可以将 Access-Control-Allow-Origin
设置为具体的域名:
add_header 'Access-Control-Allow-Origin' 'https://example.com';
允许多个域名跨域
Nginx 原生不支持直接配置多个域名,但可以通过变量和条件判断实现:
# 定义允许的域名
map $http_origin $cors_origin {
default "";
"~^https://example.com$" $http_origin;
"~^https://another.com$" $http_origin;
}
server {
listen 80;
server_name example.com;
location / {
# 动态设置允许的域名
add_header 'Access-Control-Allow-Origin' $cors_origin;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
# 处理 OPTIONS 预检请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
# 其他配置
proxy_pass http://backend;
}
}
配置静态文件的跨域
如果 Nginx 直接提供静态文件服务,可以在 location
块中添加跨域头:
server {
listen 80;
server_name example.com;
location /static/ {
# 允许跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
# 处理 OPTIONS 预检请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
# 静态文件路径
alias /path/to/static/files/;
}
}
3. 测试跨域配置
配置完成后,重启 Nginx 并测试跨域是否生效:
sudo nginx -t # 测试配置文件语法
sudo systemctl restart nginx # 重启 Nginx
使用浏览器开发者工具或 curl
命令检查响应头:
curl -I https://example.com
确保响应头中包含 Access-Control-Allow-Origin
等相关字段。
4. 注意事项
- 安全性:允许所有域名跨域(
*
)可能会带来安全风险,建议在生产环境中限制为特定的域名。 - 缓存问题:如果配置了
Access-Control-Allow-Origin
为具体域名,确保客户端不会缓存错误的响应头。 - OPTIONS 请求:对于复杂请求(如
Content-Type: application/json
),浏览器会先发送OPTIONS
预检请求,确保 Nginx 正确处理。
5. 总结
通过 Nginx 配置允许跨域,可以轻松解决前端应用访问跨域资源的问题。根据实际需求,可以选择允许所有域名、特定域名或多个域名跨域访问。配置时需注意安全性和缓存问题,确保跨域请求的稳定性和安全性。
本文来自博客园,作者:dashery,转载请注明原文链接:https://www.cnblogs.com/ydswin/p/18193923
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek-R1本地部署如何选择适合你的版本?看这里
· 开源的 DeepSeek-R1「GitHub 热点速览」
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 揭秘 Sdcb Chats 如何解析 DeepSeek-R1 思维链
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型