Nginx搭建服务器的跨域访问配置和CORS协议支持指南

hzh932

9个月前发布

08311

引言：
在当前的Web应用开发中，跨域请求已经成为一种常见的需求。为了保证安全性，浏览器默认会限制通过AJAX请求进行的跨域操作。CORS（跨域资源共享）协议为开发者提供了一种可靠的解决方案，可以实现跨域访问的可控授权。

Nginx是一个高性能的Web服务器和反向代理服务器，本文将介绍如何使用Nginx来搭建服务器的跨域访问配置和CORS协议支持。

配置服务器的跨域访问
为了授权其他域名的访问，我们首先需要在Nginx的配置文件中添加跨域访问配置。打开Nginx的配置文件（通常是/etc/nginx/nginx.conf），在http部分添加以下配置：

http {
...
# 允许跨域访问
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';
}

上述配置允许所有域名（*）进行访问，并且支持GET、POST、OPTIONS方法。同时，我们还指定了一些常见的请求头信息。

在保存并退出配置文件后，重新加载Nginx配置使其生效：

$ sudo nginx -s reload

配置CORS协议支持
在服务器中添加跨域访问配置后，我们还可以更细粒度地配置CORS协议的支持。以下是一个示例配置，只允许指定域名进行跨域访问：

http {
...
# 配置CORS
map $http_origin $allowed_origin {
default "";
~^https?://(www.)?example.com$ $http_origin;
~^https?://(www.)?example.net$ $http_origin;
}
server {
...
location / {
if ($allowed_origin != "") {
add_header 'Access-Control-Allow-Origin' $allowed_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';
}
...
}
}
}

上述配置中，我们使用了map指令来定义一个$allowed_origin变量，用于存储允许跨域访问的域名。在server块中配置了location /，并通过if指令判断当前请求来源的域名是否在允许列表中。如果是，则添加相应的CORS头信息。此外，我们也可以根据自己的需要添加更多的规则。

CORS请求的预检（preflight）
在某些情况下，跨域请求需要进行预检操作。例如使用了自定义的请求头信息或非简单请求（例如PUT、DELETE等）时。预检请求是在实际请求之前发送的一种OPTIONS请求，用于获取服务器对实际请求的授权。

为了支持预检请求，我们只需要在location /块中添加以下配置即可：

location / {
...
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $allowed_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';
return 204;
}
...
}

上述配置中，当请求方法为OPTIONS时，我们返回204（No Content）并添加CORS头信息。

结论：
通过上述配置，我们可以轻松地搭建服务器的跨域访问配置和CORS协议支持。无论是简单的跨域请求，还是复杂的预检请求，Nginx都可以提供灵活和可靠的解决方案。

参考文献：