Nginx跨域访问和防盗链如何配置

在现代Web开发中，跨域访问和防盗链是两个常见的安全和功能需求。Nginx作为一款高性能的Web服务器和反向代理服务器，提供了灵活的配置选项来满足这些需求。本文将详细介绍如何在Nginx中配置跨域访问和防盗链。

1. 跨域访问配置

跨域访问（Cross-Origin Resource Sharing, CORS）是指浏览器允许一个域下的网页向另一个域下的服务器发起请求。由于浏览器的同源策略（Same-Origin Policy），默认情况下，跨域请求是被禁止的。为了允许跨域请求，服务器需要在响应头中添加特定的CORS头。

1.1 基本配置

在Nginx中，可以通过在server块或location块中添加add_header指令来配置CORS头。以下是一个基本的配置示例：

server {
    listen 80;
    server_name example.com;

    location /api/ {
        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';

        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_server;
    }
}

1.2 配置说明

• Access-Control-Allow-Origin: 指定允许跨域访问的源。*表示允许所有源，也可以指定具体的域名。
• Access-Control-Allow-Methods: 指定允许的HTTP方法，如GET、POST、OPTIONS等。
• Access-Control-Allow-Headers: 指定允许的请求头。
• Access-Control-Expose-Headers: 指定允许暴露给客户端的响应头。
• Access-Control-Max-Age: 指定预检请求（OPTIONS）的缓存时间，单位为秒。

1.3 处理OPTIONS请求

在跨域请求中，浏览器会先发送一个OPTIONS请求（预检请求）来确认服务器是否允许跨域请求。Nginx可以通过检查$request_method变量来处理OPTIONS请求，并返回204状态码。

2. 防盗链配置

防盗链（Hotlink Protection）是指防止其他网站直接链接到你的资源（如图片、视频等），从而消耗你的带宽和资源。Nginx可以通过检查请求的Referer头来实现防盗链。

2.1 基本配置

以下是一个基本的防盗链配置示例：

server {
    listen 80;
    server_name example.com;

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
}

2.2 配置说明

• valid_referers: 指定合法的Referer值。none表示没有Referer头，blocked表示Referer头被防火墙或代理服务器修改过，example.com和*.example.com表示允许的域名。
• if ($invalid_referer): 如果Referer头不合法，则返回403状态码。

2.3 自定义错误页面

可以为防盗链配置自定义错误页面，提升用户体验：

server {
    listen 80;
    server_name example.com;

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }

    error_page 403 /403.html;
    location = /403.html {
        root /usr/share/nginx/html;
    }
}

2.4 使用Nginx模块

Nginx还提供了ngx_http_referer_module模块，可以通过valid_referers指令更灵活地配置防盗链。例如，可以允许特定的Referer头，同时拒绝其他所有请求：

server {
    listen 80;
    server_name example.com;

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
}

3. 综合配置示例

以下是一个综合配置示例，同时配置了跨域访问和防盗链：

server {
    listen 80;
    server_name example.com;

    # 跨域访问配置
    location /api/ {
        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';

        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_server;
    }

    # 防盗链配置
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }

    # 自定义错误页面
    error_page 403 /403.html;
    location = /403.html {
        root /usr/share/nginx/html;
    }
}

4. 总结

通过Nginx的灵活配置，可以轻松实现跨域访问和防盗链功能。跨域访问配置主要依赖于add_header指令，而防盗链配置则依赖于valid_referers指令和if条件判断。合理配置这些功能，不仅可以提升网站的安全性，还能有效节省带宽资源。

在实际应用中，建议根据具体需求调整配置，并进行充分的测试，以确保配置的正确性和有效性。