nginx 先後端分離 代理轉發，解決跨域問題

場景

1. 適用於公司有前端，項目採用先後端分離。相似於咱們 後端 springboot 提供接口，前端專門寫html調用相應的接口，解決跨域問題

配置說明

worker_processes  1;
    
    複製代碼

events {
        worker_connections  10240;
    }
    複製代碼

http {
        include       mime.types;
        default_type  application/octet-stream;
        client_max_body_size 200M;
        client_header_buffer_size 8k;
        large_client_header_buffers 8 16k;複製代碼

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';複製代碼

access_log  on;複製代碼

sendfile        on;複製代碼

keepalive_timeout  300;複製代碼

gzip  on;
        gzip_http_version 1.0;
        gzip_disable "MSIE [1-6].";
        gzip_types text/plain application/x-javascript text/css text/javascript;
    複製代碼

server {
            listen       80;
            server_name  localhost;
            client_header_buffer_size 8k;
            large_client_header_buffers 8 16k;
    複製代碼

root   /usr/share/nginx/html;複製代碼

location / {複製代碼

# 把跟路徑下的請求轉發給前端工具鏈（如gulp,webstorm,anywhere）打開的開發服務器
                  # 若是是產品環境，則使用root等指令配置爲靜態文件服務器
                  # proxy_pass http://localhost:80;複製代碼

#proxy_redirect default;
              }複製代碼

location /management/ {
              # 把 /api 路徑下的請求轉發給真正的後端服務器
            proxy_pass http://192.168.199.131:8090/management/;
              proxy_cookie_path  /management/ /;
            proxy_set_header   Host    $host;
            proxy_set_header Cookie $http_cookie;
            proxy_set_header   Remote_Addr    $remote_addr;
            proxy_set_header   X-Real-IP    $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;複製代碼

client_max_body_size 200m;複製代碼

proxy_connect_timeout 18000;複製代碼

proxy_send_timeout 18000;複製代碼

proxy_read_timeout 18000;
            }
    複製代碼

location /agents/ {
            proxy_pass http://192.168.199.131:8092/;
              proxy_cookie_path  /agents/ /;
            proxy_set_header   Host    $host;
            proxy_set_header Cookie $http_cookie;
            proxy_set_header   Remote_Addr    $remote_addr;
            proxy_set_header   X-Real-IP    $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;複製代碼

client_max_body_size 200m;複製代碼

proxy_connect_timeout 18000;複製代碼

proxy_send_timeout 18000;複製代碼

proxy_read_timeout 18000;
          }複製代碼

}
    }
複製代碼

重點說明 location 的配置 。

好比前端html請求地址 http://localhost:80/index.html

前端調用接口的地址爲 http://localhost:80/api 其實api並不在改域下，在http://192.168.199.111:8888/ 下 則須要解決2個問題 前端ajax跨域與接口轉發到相應位置

着重看 1 2 3

location /api/ {  // 1 
        proxy_pass http://192.168.199.111:8888/; // 2 
          proxy_cookie_path  /api/ /; // 3 
        proxy_set_header   Host    $host;
        proxy_set_header Cookie $http_cookie; // 發送cookie 解決 session 一致性問題
        proxy_set_header   Remote_Addr    $remote_addr;
        proxy_set_header   X-Real-IP    $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;複製代碼

client_max_body_size 200m;複製代碼

proxy_connect_timeout 18000;複製代碼

proxy_send_timeout 18000;複製代碼

proxy_read_timeout 18000;
      }複製代碼

}複製代碼

如感受文章對你有所幫助，能夠關注微信公衆號【五彩的顏色】鼓勵一下