Nginx配置反向代理 proxy_pass

本文轉載自查看原文 2021-11-10 17:29 3748 nginx

一，Nginx配置反向代理

客戶端網頁ajax請求示例：

$.ajax({
     url: 'http://192.168.1.100:80/king-boot/test/hcode',
     dataType: 'json',
     type: 'get',
     beforeSend: function(request) {
           request.setRequestHeader("area-code", "test");
     },
    complete: function (xhr,data){
         console.info(xhr.getResponseHeader('api-header'))
    },
     success: function(data) {
                    
     },
     error: function(error){
                    
     }
})

1，簡單反向代理，無自定義header、包含解決跨域問題

原始服務端api請求地址：http://192.168.1.102:8080/king-boot/

因客戶端請求api存在跨域問題，所以需要通過一台nginx服務器反向代理處理一下

所以客戶端應該去請求的nginx地址：http://192.168.1.100:80/king-boot/xxx

然后nginx服務器，通過代理請求服務端api地址

下面為nginx服務器的nginx.conf配置(省去了部分配置)：

server {
　listen 80;
　server_name 192.168.1.100;
    location /king-boot {
        add_header Access-Control-Allow-Origin *;#如果服務端已經設置該參數，則此處禁止重復設置
        proxy_pass http://192.168.1.102:8080/king-boot/;
    }
}

2，復雜反向代理，有自定義header、包含解決跨域問題

客戶端網頁通過nginx反向代理，解決服務端跨域問題時，有時會設置自定義header，此時配置如下：

server {
　listen 80;　server_name 192.168.1.100;
    location /king-boot {
        if ($request_method = 'OPTIONS') { #處理預檢請求
            add_header 'Access-Control-Allow-Origin' '*'; #此處理客戶端預檢請求->nginx服務器跨域問題
            add_header 'Access-Control-Allow-Headers' '*'; #此允許客戶端請求攜帶header自定義參數，也可以指定具體參數名稱
            return 204;
        }
        if ($request_method != 'OPTIONS') { #正常請求
            #add_header 'Access-Control-Allow-Origin' '*'; #此處根據服務端api是否配置跨域決定是否配置，不能重復配置
        }
        proxy_pass http://192.168.1.102:8080/king-boot/;
    }
}

3，完善配置

配置參數說明：

Access-Control-Allow-Origin：必須配置的字段，'*'表示接受任意域名的請求，也可以指定接受某一個域名的請求
Access-Control-Request-Headers：如果瀏覽器請求包括Access-Control-Request-Headers字段，則在Nginx配置中也是必須的，是一個由逗號分隔的字符串
Access-Control-Expose-Headers：可選配置字段。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定

Access-Control-Request-Method：該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法 Access-Control-Max-Age：用來指定本次預檢請求的有效期，單位為秒

下面為較完善的配置，只供參考，請根據實際情況進行配置

server {
　listen 80;
　server_name 192.168.1.100;
    underscores_in_headers on;
    location /king-boot {
        if ($request_method = 'OPTIONS') { #處理預檢請求
            add_header 'Access-Control-Allow-Origin' '*'; #此處理客戶端預檢請求->nginx服務器跨域問題
           #此允許客戶端請求攜帶header自定義參數，其它固定的header也需要配置上
            add_header 'Access-Control-Allow-Headers' 'my-header,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'; 
            add_header 'Access-Control-Max-Age' 1728000; #用來指定本次預檢請求的有效期，單位為秒
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method != 'OPTIONS') { #正常請求
 　　　　　　　add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #add_header 'Access-Control-Allow-Origin' '*'; #此處根據服務端api是否配置跨域決定是否配置，不能重復配置
　　　　　　　 add_header 'Access-Control-Expose-Headers' '*'; #此處設置客戶端可以獲取到的 服務端自定義header名稱
        } 
        # proxy_set_header area-code 'CWHT'; #設置固定自定義header參數，不由客戶端傳遞
        proxy_pass https://wxapp.jktv.tv/;
    }
}