vue配置反向代理的使用

反向代理：常用于生产环境，项目部署时服务器的配置。

反向代理：同样创建一个代理服务器，用于接收客户端发送的请求，再将请求转发给内部网络上的服务器，从服务器中获取数据并返回给客户端。也就是 代理服务端。

用途：

• 隐藏服务器的真实 IP 地址：可以通过反向代理，对客户端隐藏服务器的 IP 地址。
  
• 负载均衡：根据所有真实服务器的负载状况，将客户端的请求分发到不同的真实服务器上。
  
• 提高访问速度：可以对静态内容和短时间内有大量访问的动态内容提供缓存服务，以提高访问速度。
  
• 提供安全保障：可以作为应用层的防火墙，给网站提供对于 web 攻击的防护，更容易排查恶意软件等。还可以给后端服务器统一提供加密和 SSL 加速，提供 HTTP 访问认证等。
  

宝塔面板配置反向代理【Nginx环境】

// 假设接口

API接口地址1：http://www.baidu.com/api/goods/list

API接口地址2：http://www.baidu.com/webapi/user/info

1.打开宝塔面板，进入网站列表，点击需要配置的网站，点击反向代理。

2. 添加反向代理，这里的配置建议和本地的正向代理配置一致。

3. 项目里的请求和正向代理一样，不用修改，正常使用就行。

// 请求API接口1
axios({
    method: 'post',
    url: '/api/goods/list',
    data: qs.stringify({
        id: 1
    })
}).then((res) => {
    console.log(res.data);
})
// 请求API接口2
axios({
    method: 'post',
    url: '/webapi/user/info',
    data: qs.stringify({
        id: 1
    })
}).then((res) => {
    console.log(res.data);
})

 正向代理与反向代理的区别：

• 正向代理是客户端的代理，服务器不知道真正的客户端是谁。而反向代理是服务器的代理，客户端不知道真正的服务器是谁。
  
• 正向代理一般是客户端设置的。而反向代理一般是服务器设置的。
  
• 正向代理主要用来解决访问限制的问题，而反向代理则是提供负载均衡、安全防护等作用。不过二者都能提高访问速度。
  

原创作者：吴小糖

创作时间：2023.6.20