Nginx 允许跨域

什么是跨域？

跨域是指在 Web 应用中，不同域下的客户端请求资源时，浏览器会根据同源策略（Same Origin Policy）对请求进行限制。即，如果当前请求的域、协议、端口与该资源的域、协议、端口不一致，那么浏览器将阻止该请求，从而保护用户安全。

Nginx 如何允许跨域？

当我们在 Nginx 上搭建 Web 应用时，如果需要允许跨域请求，可以通过修改配置文件来实现。下面是一个示例：

# 在 http 或 server 配置中添加以下内容
location /api {
    # 允许指定域名跨域请求
    add_header 'Access-Control-Allow-Origin' 'http://example.com';

    # 允许指定的请求方式（多个请求方式时用逗号分隔）
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

    # 允许指定的请求头（多个请求头时用逗号分隔）
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

    # 允许跨域请求发送认证信息（如 cookie）
    add_header 'Access-Control-Allow-Credentials' 'true';

    # 允许请求缓存的时间（秒）
    add_header 'Access-Control-Max-Age' 3600;

    # 处理 OPTIONS 请求（预检请求）的情况
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'http://example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 3600;
        return 204;
    }

    # 处理其他请求的情况
    proxy_pass http://backend_server:port;
}

在上面的示例中，我们通过 add_header 指令设置了跨域请求的响应头信息。其中，Access-Control-Allow-Origin 表示允许跨域请求的域名，Access-Control-Allow-Methods 表示允许请求的方式，Access-Control-Allow-Headers 表示允许请求的头信息，Access-Control-Allow-Credentials 表示允许跨域请求发送认证信息（如 cookie），Access-Control-Max-Age 表示允许请求缓存的时间。

当客户端发送 OPTIONS 请求时（也称为预检请求），我们通过 if 指令处理该请求，并返回一个 204 状态码。这样，就可以告诉客户端当前域名允许跨域请求。

总结

通过修改 Nginx 配置文件，我们可以允许跨域请求。在实际应用中，我们可以根据需要设置允许跨域请求的域名、请求方式、请求头信息等。这样，就可以保证 Web 应用的安全性，同时又能满足跨域请求的需求。