近期寫個小demo,因爲用到某大廠的在線數據,接口做了跨域限制,所以利用Nginx代理來解決這些問題。
1. nginx.conf 配置信息
由於nginx.conf
配置信息較多,本篇只關注跟axios
和靜態資源請求設置,順便也將常見的一些配置項備註一下。具體設置如下:
# 設定http服務器,利用它的反向代理功能提供負載均衡支持
http {
#連接超時時間
keepalive_timeout 120;
#gzip壓縮開關及相關配置
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].";
#設定實際的服務器列表
upstream zp_server{
server 127.0.0.1:8089;
}
#HTTP服務器
server {
#監聽80端口
listen 80
#定義服務名稱
server_name localthost;
#首頁
index index.html
#指向項目根目錄
root D:\project\src\main\webapp;
#編碼格式
charset utf-8;
#代理的路徑(和upstream綁定),location 後面設置映射的路徑
location / {
#代理配置參數
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/;
#跨域相關設置
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;
}
#配置靜態資源 解決js css文件無法加載無法訪問的問題,注意末尾不能有 /
location ~ .*\.(js|css|jpg|png)$ {
proxy_pass http://zp_server;
}
}
}
2. proxy_pass的斜槓問題
Nginx
的官網將proxy_pass
分爲兩種類型:
- 一種是隻包含IP和端口號的(連端口之後的
/
也沒有,這裏要特別注意),比如proxy_pass http://localhost:8080
,這種方式稱爲不帶URI方式; - 另一種是在端口號之後有其他路徑的,包含了只有單個
/
的,如proxy_pass http://localhost:8080/
,以及其他路徑,比如proxy_pass http://localhost:8080/abc
。
2.1 對於不帶URI方式
對於不帶URI
方式,Nginx
將會保留location
中路徑部分,比如:
location /api1/ {
proxy_pass http://localhost:8080;
}
在訪問http://localhost/api1/xxx
時,會代理到http://localhost:8080/api1/xxx
2.2 對於帶URI方式
對於帶URI方式,nginx將使用諸如alias
的替換方式對URL進行替換,並且這種替換隻是字面上的替換,比如:
location /api2/ {
proxy_pass http://localhost:8080/;
}
當訪問http://localhost/api2/xxx
時,http://localhost/api2/
(注意最後的/
)被替換成了http://localhost:8080/
,然後再加上剩下的xxx,於是變成了http://localhost:8080/xxx
。
2.3 總結一下
server {
listen 80;
server_name localhost;
location /api1/ {
proxy_pass http://localhost:8080;
}
# http://localhost/api1/xxx -> http://localhost:8080/api1/xxx
location /api2/ {
proxy_pass http://localhost:8080/;
}
# http://localhost/api2/xxx -> http://localhost:8080/xxx
location /api3 {
proxy_pass http://localhost:8080;
}
# http://localhost/api3/xxx -> http://localhost:8080/api3/xxx
location /api4 {
proxy_pass http://localhost:8080/;
}
# http://localhost/api4/xxx -> http://localhost:8080//xxx,請注意這裏的雙斜線,好好分析一下。
location /api5/ {
proxy_pass http://localhost:8080/haha;
}
# http://localhost/api5/xxx -> http://localhost:8080/hahaxxx,請注意這裏的haha和xxx之間沒有斜槓,分析一下原因。
location /api6/ {
proxy_pass http://localhost:8080/haha/;
}
# http://localhost/api6/xxx -> http://localhost:8080/haha/xxx
location /api7 {
proxy_pass http://localhost:8080/haha;
}
# http://localhost/api7/xxx -> http://localhost:8080/haha/xxx
location /api8 {
proxy_pass http://localhost:8080/haha/;
}
# http://localhost/api8/xxx -> http://localhost:8080/haha//xxx,請注意這裏的雙斜槓。
}