前言:Nginx使用Nginx解决跨域问题时,通常我们需要配置响应头中的 Access-Control-Allow-Origin 等 CORS(跨域资源共享)相关的头信息。

Nginx 配置示例

假设你的站点配置文件是 /etc/nginx/sites-available/your_site:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
listen 80;
server_name your_site.com;

location / {
# 如果你有反向代理到后端服务器,可以放在这里
proxy_pass http://backend_server;

# 设置CORS响应头
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

# 如果是OPTIONS请求,直接返回204 No Content
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
}

详细解释

add_header ‘Access-Control-Allow-Origin’ ‘‘;
这行代码允许任何域名访问你的资源。如果你只希望特定的域名可以访问,可以将 ‘
‘ 替换为特定的域名,例如 http://example.com。

add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS, PUT, DELETE’;
这行代码允许的HTTP方法,可以根据实际情况调整。

add_header ‘Access-Control-Allow-Headers’ ‘Origin, Content-Type, Accept, Authorization’;
这行代码指定允许的请求头字段,可以根据实际需要进行调整。

OPTIONS请求的处理
预检请求(OPTIONS方法)的特殊处理,直接返回204 No Content。这样可以避免浏览器对预检请求的实际处理过程。

proxy_pass http://backend_server;
如果你的Nginx作为反向代理服务器,这行代码将请求转发到后端服务器。

保存并重启Nginx

编辑完配置文件后,保存并重启Nginx以应用配置:

1
sudo systemctl restart nginx

通过这些配置,你的Nginx服务器就可以处理跨域请求了。如果有其他特殊需求或更复杂的配置,可以在此基础上进行调整。