来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

反向代理

反向代理中的常用指令：

1
2
3
# 设置被代理服务前地址，可以是主机名称或IP地址+端口号形式
proxy_pass
proxy_set_header

例如代理到百度：

1
2
3
4
5
6
# 访问/会转到百度
location / {
   root   html;
   index  index.html index.htm;
   proxy_pass https://www.baidu.com;
}

解决跨域

前端JS（8080端口）：

1
2
3
4
5
6
7
8
9
10
11
12
13
a.onclick = () => {
  let xhr = new XMLHttpRequest()
 
  xhr.open('GET','/api/portal/list')
 
  xhr.onreadystatechange = () => {
    if(xhr.readyState == 4 &&  xhr.status == 200){
      console.log(xhr.responseText);
    }
  }
 
  xhr.send(null)
}

服务端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const express = require('express')
 
const app = express()
 
app.get('/portal/list', (req, res) => {
    res.json({
        code: 200,
        message: "omg"
    })
})
 
app.listen(9000,()=>{
    console.log('success');
})

Nginx配置文件：

1
2
3
location /api/ {
  proxy_pass http://localhost:9000/;
}

这样就能实现跨域，前端JS截取到/api/就会转发到http://localhost:9000/

proxy_set_header

更改Nginx服务器接收到的客户端请求的请求头信息，然后将新的请求头发送给代理的服务器

1
2
3
4
5
6
# X-Real-IP 客户端或上一级代理ip
proxy_set_header X-Real-IP $remote_addr;
# X-Real-Port 客户端或上一级端口
proxy_set_header X-Real-Port $remote_port;
# X-Forwarded-For 包含了客户端和各级代理ip的完整ip链路
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

X-Real-IP是必需的，其他是可选填

当只存在一级Nginx代理时，X-Real-IP和X-Forwarded-For是一致的

$remote_addr是前一节点的IP，并不一定是用户的真实IP