Nginx反向代理实现Vue访问Netcore的简要说明

发布时间 2023-08-16 14:51:50作者: Fast & Furious

1、Nginx的nginx.conf文件配置

 1     server {
 2         listen       8080;      
 3         server_name  127.0.0.1;
 4 
 5         #charset koi8-r;
 6 
 7         #access_log  logs/host.access.log  main;
 8         
 9 
10          location / {
11            proxy_pass http://localhost:3000;
12         }
13         location /dev-api {
14            proxy_pass https://localhost:7093;
15         }
16         #error_page  404              /404.html;
17 
18         # redirect server error pages to the static page /50x.html
19         #
20         error_page   500 502 503 504  /50x.html;
21         location = /50x.html {
22             root   html;
23         }
24 
25     }

说明:listen、server_name是浏览器实际请求的IP和端口

2、Nginx请求代理过程说明

浏览器地址栏输入http:localhost:8080,浏览器会自动跳转到 http://localhost:3000,也就是我们前端的地址

           

 

这时我们f12调试到网络请求监控模式,f5刷新页面,可以看到获取验证码的请求是 http://localhost:8080/dev-api/api/v1/auth/captcha

而实际的请求是 https://localhost:7093/dev-api/api/v1/auth/captcha, Nginx通过请求地址后的第一个片段进行匹配实现反向代理