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. 使用示例

例如，现在将 http://localhost/api/getUser 请求转发到 http://localhost:8080/getUser，配置如下：

        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