nginx代理前端哀求

一，项目配置

我在 ip 为 192.168.31.177 的机器上利用 vue3 开发前端项目，项目中利用 axios 调用后端接口。
这是 axios 的配置：

1. import axios from 'axios';
3. const request = axios.create({
4.     baseURL: 'http://192.168.31.177:8001',
5.     // 设置请求头
6.     headers: {},
7.     // 设置超时时间
8.     timeout: 2000,
9. });
12. // 请求拦截器
13. request.interceptors.request.use(
14.     config => {
15.         // 在发送请求之前做些什么
17.         return config;
18.     },
19.     error => {
20.         // 对请求错误做些什么
21.         return Promise.reject(error);
22.     }
23. );
25. // 响应拦截器
26. request.interceptors.response.use(
27.     response => {
28.         if (response) {
29.             // 响应数据为二进制流处理(数据导出)
30.             if (response.data.data instanceof Blob) {
31.                 return response
32.             }
34.             const {code, msg} = response.data
35.             if (code === 200) {
36.                 return Promise.resolve(response.data)
37.             } else {
38.                 return Promise.resolve(response)
39.             }
40.         } else {
41.             return Promise.reject(new Error('系统出错'))
42.         }
43.     },
45.     function (error) {
46.         // 对响应错误做点什么
48.         // 比如：根据响应状态码，做不同的响应处理
49.         console.log(error)
50.         return Promise.reject(error)
51.     }
52. )
54. export default request

复制代码

这是页面中的哀求：

1. axios.get('/api/getNumbers')
2.         .then(res => {
3.             ElMessage({
4.                 message: res.msg,
5.                 type: 'success'
6.             })
7.         }).catch(err => {
8.             ElMessage({
9.                 message: err,
10.                 type: 'error'
11.             })
12.         })

复制代码

这是 package.json 中的配置：

1.   "scripts": {
2.     "dev": "vite --host 192.168.31.177",
3.     "build": "vite build",
4.     "preview": "vite preview"
5.   }

复制代码

然后在 ip 为 192.168.31.45 的机器上启动 expressjs 开发的后端项目 192.168.31.45:3000：

1. app.get('/api/getNumbers', (req, res) => {
2.     // 生成两个随机数
3.     const number1 = Math.floor(Math.random() * 100);
4.     const number2 = Math.floor(Math.random() * 100);
5.     res.json({
6.         code: 200,
7.         msg: '成功！',
8.         data: {
9.             "a": number1,
10.             "b": number2,
11.         }
12.     });
13. });

复制代码

如今想利用 nginx 将前端的哀求代理到后端，下面将先容 nginx 需要怎样配置以及具体原理。
二，配置 nginx

前端项目运行在 192.168.31.177（开发机器），后端运行在 192.168.31.45:3000，Nginx 需要配置为反向代理，将前端哀求转发到后端。
在开发机器（192.168.31.177）上 Nginx 的配置文件（nginx.conf）：

1. http {
2.     server {
3.         listen 8001;                # Nginx 监听的端口，前端 axios 中配置的 端口
4.         server_name 192.168.31.177; # 前端 axios 中配置的 IP
6.         location / {
7.             try_files $uri $uri/ /index.html; # 支持Vue路由的history模式
8.         }
10.         # 代理后端API请求
11.         location /api {
12.             proxy_pass http://192.168.31.45:3000;        # 后端项目运行的地址
14.             # 可选：如果后端接口路径不包含/api，移除前缀
15.             # rewrite ^/api/(.*) /$1 break;
17.             # 添加必要的代理头信息
18.             proxy_set_header Host $host;
19.             proxy_set_header X-Real-IP $remote_addr;
20.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
21.             proxy_set_header X-Forwarded-Proto $scheme;
22.         }
23.     }
24. }

复制代码

配置完成后执行：

1. G:\nginx-1.24.0>nginx -t                 # 检查配置语法
2. nginx: the configuration file G:\nginx-1.24.0/conf/nginx.conf syntax is ok
3. nginx: configuration file G:\nginx-1.24.0/conf/nginx.conf test is successful
5. G:\nginx-1.24.0>start nginx                # 启动nginx
7. G:\nginx-1.24.0>nginx -s reload # 不停止，重新加载

复制代码

• 打开【任务管理器——进程，搜索 nginx，可以看到两个进程，说明 nginx 精确启动。
  

启动前端项目，访问 http://192.168.31.177:5173/。打开页面后调用接口，获取到接口数据。

三，Nginx 代理原理

反向代理的作用：

• 哀求转发：Nginx 监听前端哀求（如 http://192.168.31.177:8080/api/getNumbers），并将匹配 /api 的哀求转发到后端服务器 http://192.163.109.134:3000。
  
• 隐藏后端细节：前端无需知道后端地址，只需与 Nginx 通讯。
  
• 办理跨域：欣赏器以为哀求是同源的（都是 http://192.168.31.177:8080），实际由 Nginx 转发到不同域的后端。
  
• 关键配置表明
  
  1. location /api：匹配所有以 /api 开头的请求路径。
  3. proxy_pass：将匹配的请求转发到后端服务器。
  5. proxy_set_header：设置请求头，确保后端能获取客户端的真实 IP 和协议信息。
  7. add_header：添加 CORS 响应头，显式允许跨域（可选，如果代理已解决跨域，可能不需要）。

  复制代码

为什么这样配置？

• 办理跨域题目：欣赏器默认禁止跨域哀求，但通过 Nginx 代理：前端哀求发送到 http://192.168.31.177:8080/api（同源）。Nginx 将哀求转发到 http://192.163.109.134:3000/api，后端相应通过 Nginx 返回前端。欣赏器以为哀求是“同源”的，不会触发跨域限制。
  
• 灵活的路由控制：可以按路径（如 /api）或域名分发哀求。
  
• 支持负载均衡、缓存等高级功能（开发阶段大概不需要）。
  
• 统一入口：前端和后端通过同一个端口（如 8080）通讯，简化开发配置。
  

验证配置是否见效：

• 在欣赏器中访问后端 API http://192.163.109.134:3000/api/getNumbers，确保后端正常返回数据。
  
• 通过 Nginx 访问 API http://192.168.31.177:8080/api/getNumbers，检查是否返回相同数据。
  
• 检检察 Nginx 的访问日记和错误日记，确认哀求是否被精确转发。
  
• Nginx 未启动或配置错误题目排查
  1. status nginx 检查服务状态。
  2. nginx -t 检查配置语法。

  复制代码

四，源码

nginx代理前端哀求——教程源码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告