前言

近期寫個(gè)小demo，因?yàn)橛玫侥炒髲S的在線數(shù)據(jù)，接口做了跨域限制，所以利用Nginx代理來(lái)解決這些問(wèn)題。

1. nginx.conf 配置信息

由于nginx.conf配置信息較多，本篇只關(guān)注跟axios和靜態(tài)資源請(qǐng)求設(shè)置，順便也將常見(jiàn)的一些配置項(xiàng)備注一下。具體設(shè)置如下：

# 設(shè)定http服務(wù)器，利用它的反向代理功能提供負(fù)載均衡支持http { #連接超時(shí)時(shí)間 keepalive_timeout 120;  #gzip壓縮開(kāi)關(guān)及相關(guān)配置 gzip on; gzip_min_length 1k; gzip_buffers  4 32k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types  text/plain application/x-javascript text/css application/xml; gzip_vary on; gzip_disable "MSIE [1-6]."; #設(shè)定實(shí)際的服務(wù)器列表  upstream zp_server{ server 127.0.0.1:8089; }  #HTTP服務(wù)器  server { #監(jiān)聽(tīng)80端口 listen 80  #定義服務(wù)名稱 server_name localthost;  #首頁(yè) index index.html  #指向項(xiàng)目根目錄 root D:/project/src/main/webapp;  #編碼格式 charset utf-8;  #代理的路徑（和upstream綁定），location 后面設(shè)置映射的路徑 location / {  #代理配置參數(shù)  proxy_connect_timeout 180;  proxy_send_timeout 180;  proxy_read_timeout 180;  proxy_set_header Host $host;  proxy_set_header X-Forwarder-For $remote_addr;  proxy_pass http://zp_server/;    #跨域相關(guān)設(shè)置  add_header 'Access-Control-Allow-Origin' '*' always;  add_header 'Access-Control-Allow-Credentials' 'true';  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;  }    #配置靜態(tài)資源 解決js css文件無(wú)法加載無(wú)法訪問(wèn)的問(wèn)題，注意末尾不能有 /  location ~ .*/.(js|css|jpg|png)$ {  proxy_pass http://zp_server;  }  }}

2. proxy_pass的斜杠問(wèn)題

Nginx的官網(wǎng)將proxy_pass分為兩種類型：

2.1 對(duì)于不帶URI方式

對(duì)于不帶URI方式，Nginx將會(huì)保留location中路徑部分，比如：

location /api1/ { proxy_pass http://localhost:8080;}

在訪問(wèn)http://localhost/api1/xxx時(shí)，會(huì)代理到http://localhost:8080/api1/xxx

2.2 對(duì)于帶URI方式

對(duì)于帶URI方式，nginx將使用諸如alias的替換方式對(duì)URL進(jìn)行替換，并且這種替換只是字面上的替換，比如：

location /api2/ { proxy_pass http://localhost:8080/;}

當(dāng)訪問(wèn)http://localhost/api2/xxx時(shí)，http://localhost/api2/（注意最后的/）被替換成了http://localhost:8080/，然后再加上剩下的xxx，于是變成了http://localhost:8080/xxx。