Nginx配置允许跨域

忆雏闲 · 昨天 09:45

在 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 配置允许跨域，可以轻松解决前端应用访问跨域资源的问题。根据实际需求，可以选择允许所有域名、特定域名或多个域名跨域访问。配置时需注意安全性和缓存问题，确保跨域请求的稳定性和安全性。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

Nginx配置允许跨域

浏览过的版块

签约作者