URL重寫

在前後端分離的開發模式中，會遇到這樣一個需求：前端透過特定路由字首來訪問後端介面，例如：http://localhost/api/getUser，這裡 api 即是每一個前端 request 所多加的字首。nginx 需要把http://localhost/api/getUser 轉換成後端的訪問埠及路由，例如：http://localhost:8080/getUser，從而訪問服務。

這裡就涉及到一個URL重寫的的概念，可以使用多種方式來實現，那麼這裡由於前端程式時透過 webpack 打包後，將靜態檔案釋出在 nginx 上，所以我們需要透過 nginx 的 rewirte 指令來進行 URL 的重寫。

location匹配規則

在使用 rewirte 指令前，我們需要先熟悉 location 匹配規則。

這裡只涉及一般會用到的語法：

1. = 開頭精準匹配，停止搜尋並立即處理請求

例：	location = /login {  	   #規則A  	}  	location / {  	   #規則B 	}  	http://localhost/login 將匹配規則A	http://localhost/register 則匹配規則B

2. ~ 區分大小寫匹配(可用正則表示式)

3. ~* 不區分大小寫匹配(可用正則表示式)

	location ~ \.(gif|jpg|png|js|css)$ {  	   #規則D  	}  	location ~* \.png$ {  	   #規則E  	} 	http://localhost/a.PNG 則匹配規則E，	不會匹配規則D，因為規則E不區分大小寫

4. !~ 區分大小寫不匹配

5. !~* 不區分大小寫不匹配

6. ^~ 如果路徑中匹配，那麼不測試正則表示式

rewrite 使用規則

1. nginx-rewirte 使用語法：

rewrite regex replacement [flag]; 

2. 引數介紹

regex ：可以使用正則或者字串來表示相匹配的地址。replacement：可以表示重定向的地址。flag：指令集，匹配後續動作。取值 last、break：目前看來，作用類似，都是重寫後停止處理**重寫**其他指令。 redirect：如果替換字串不以“ http://”，“ https://”或“ $scheme” 開頭，返回帶有302程式碼的臨時重定向，瀏覽器地址會顯示跳轉後的URL地址。 permanent：返回301程式碼的永久重定向，瀏覽器位址列會顯示跳轉後的URL地址。

3. 使用示例

        location ^~ /api/ {                rewrite  ^/api/(.*)$ /$1 break;                proxy_pass http://localhost:8080;        }

location 匹配：路由中匹配到 /api/ 即執行規則。

正則：以 /api/ 開始，子表示式匹配任意多單字元，結束。

tips

1. react（umi）頁面重新整理404，配置

try_files  $uri $uri/ /index.html;

參考文獻

https://www.cnblogs.com/dalaoyang/p/10264919.html