nginx搭建效劳器的跨域会见设置和cors协议支持指南

小序：

在目今的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都可以提供无邪和可靠的解决计划。

参考文献：

[Nginx官方文档](https://nginx.org/en/docs/)

[CORS官方文档](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

以上就是Nginx搭建效劳器的跨域会见设置和CORS协议支持指南的详细内容
，更多请关注本网内其它相关文章！