nginx允許跨域訪問

一、nginx允許跨域訪問設置

Nginx允許跨域訪問需要在Nginx配置文件中進行設置。在nginx.conf文件中的http部分中，可以使用add_header指令來配置允許跨域訪問的響應頭：

http {
    // 其他配置

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header Access-Control-Allow-Credentials true;
}

上述add_header指令中的參數的含義如下：

Access-Control-Allow-Origin：指定允許的跨域來源，可以是一個具體的域名，也可以使用通配符「*」表示允許任意跨域來源。
Access-Control-Allow-Methods：指定允許的跨域請求方法。
Access-Control-Allow-Headers：指定允許跨域請求頭。
Access-Control-Allow-Credentials：指定是否允許跨域請求發送Cookie。

二、nginx配置允許跨域訪問

Nginx配置允許跨域訪問需要在Nginx配置文件中進行設置。在server部分中，可以使用底下示例的配置來允許跨域訪問：

server {
    // 其它配置

    location / {
        # 允許指定的跨域源
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Max-Age' 1728000;

            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        # 處理其他請求
    }
}

上述配置中使用了if指令來判斷請求方式，根據不同的請求方式來設置響應頭。通過配置「Access-Control-Allow-Origin」、「Access-Control-Allow-Methods」、「Access-Control-Allow-Headers」和「Access-Control-Allow-Credentials」等響應頭，完成nginx允許跨域訪問的設置。

三、nginx允許目錄訪問

若需要nginx允許目錄訪問，需要使用autoindex指令來開啟。在nginx.conf配置文件中，可以在相應的server配置塊中添加以下配置：

server {
    # 其它配置

    location /path/to/directory/ {
        autoindex on; # 開啟目錄訪問功能
        index index.html; # 默認打開的文件

        # 授權認證：禁止訪客許可權
        # auth_basic "Restricted"; # 第一行表示開啟認證功能
        # auth_basic_user_file /etc/nginx/.htpasswd; # 定義用戶名和密碼
        # 第二行定義用戶名和密碼，
        # 要使用htpasswd命令生成對應用戶名和加密後的密碼
        # /etc/nginx/.htpasswd 中存儲著用戶名和密碼信息
    }
}

其中，autoindex指令用於開啟nginx目錄瀏覽功能，index指令則指定了默認打開的文件。示例中還展示了如何使用Nginx進行授權認證。

四、nginx支持跨域訪問

Nginx支持跨域訪問，是因為Nginx提供了proxy_pass指令用於實現反向代理。使用反向代理可以將客戶端的請求轉發到其他伺服器，實現不同域名或不同埠的資源訪問。

在nginx.conf配置文件中，可以使用以下配置實現反向代理：

server {
    # 其它配置

    location /api {
        proxy_pass http://api.example.com; # 將請求轉發到api.example.com
        proxy_set_header Host $host; # 可選項：將客戶端請求頭中的Host信息傳遞給後端伺服器
    }
}

以上為Nginx反向代理的基本配置。需要注意的是，使用反向代理時需要確保被代理的後端服務也已經允許跨域訪問，否則會導致跨域訪問失敗。

五、nginx實現跨域訪問

Nginx實現跨域訪問可以採用proxy_pass指令和Nginx自帶的CORS模塊。CORS模塊可簡化跨域訪問設置的過程，省去手動設置響應頭的步驟。

在nginx.conf配置文件中，可以使用以下配置開啟CORS模塊並實現跨域訪問：

http {
    # 其它配置

    cors on;
    cors_origin *
    cors_methods GET POST PUT DELETE OPTIONS;
    cors_headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
}

上述配置中，cors指令用於開啟CORS模塊，cors_origin指令用於指定允許跨域請求的源，cors_methods指令用於指定支持的跨域請求方法，cors_headers指令用於指定允許跨域請求頭。

六、nginx配置跨域訪問

Nginx配置跨域訪問是指設置Nginx為跨域訪問代理伺服器，在代理中實現跨域訪問。在nginx.conf配置文件中，可以使用以下示例代碼實現Nginx配置跨域訪問：

http {
    # 其它配置

    map $http_origin $cors_header {
      default "";
      ~^https://(.+)$ $http_origin;
    }

    server {
        # 其它配置

        location /api {
              add_header 'Access-Control-Allow-Origin' "$cors_header" always;
              add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
              add_header 'Access-Control-Allow-Headers' 'Authorization, X-Requested-With, Content-Type, Accept' always;
              add_header 'Access-Control-Allow-Credentials' 'true' always;
              if ($request_method = 'OPTIONS') {
                  return 204;
              }

              proxy_pass http://localhost:3000;
        }
    }
}

上述代碼使用了Nginx的map指令來動態設置跨域響應頭中的「Access-Control-Allow-Origin」值。示例中還對「Access-Control-Allow-Methods」、「Access-Control-Allow-Headers」和「Access-Control-Allow-Credentials」等參數進行了設置，以實現完整的CORS配置。

七、nginx限制跨域訪問

Nginx限制跨域訪問需要對CORS請求進行審計，並拒絕未經授權的跨域訪問。可以使用Nginx的referer指令和if指令實現跨域訪問限制。例如，在nginx.conf配置文件中可以使用以下代碼進行配置：

location / {
    # 其它配置

    if ($http_accept !~* "application/json"){
        return 403;
    }
    if ($http_referer !~* (http://www\.example\.com)){
        return 403;
    }
}

上述代碼中，if指令通過判斷請求頭中的Accept參數，以及Referer參數，決定是否進行限制跨域訪問。示例中使用了~*正則表達式判斷請求頭中是否包含「application/json」，使用!~*判斷referer是否包含「http://www.example.com」。

八、nginx 文件伺服器跨域訪問

可以使用Nginx搭建一個文件伺服器，實現文件的訪問和下載。如果需要在文件伺服器上實現跨域訪問，需要在nginx.conf配置文件中進行相關的CORS跨域訪問設置。以下是一個基本的文件伺服器跨域訪問配置示例：

http {
    # 其它配置

    server {
        listen 80;
        server_name example.com;

        location /files/ {
              add_header 'Access-Control-Allow-Origin' '*' always;
              add_header 'Access-Control-Allow-Methods' 'GET' always;
              add_header 'Access-Control-Allow-Headers' 'Authorization, X-Requested-With, Content-Type, Accept' always;

              alias /path/to/files/; # 文件存儲路徑
              autoindex on;
        }
    }
}

在上述配置示例中，location /files/用於指定文件訪問的路徑，通過alias指定文件存儲的路徑。允許跨域請求通過add_header指令設置相關的CORS響應頭。

總結

本文從多個方面對nginx允許跨域訪問進行了詳細的闡述，包括nginx允許跨域訪問設置、nginx配置允許跨域訪問、nginx允許目錄訪問、nginx支持跨域訪問、nginx實現跨域訪問、nginx配置跨域訪問以及nginx限制跨域訪問等。對於想要了解、使用Nginx實現跨域訪問及限制的讀者，本文提供了參考的實用代碼和方法。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/157654.html