vue配置反向代理的使用

news2024/11/25 2:49:51

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

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

用途：

隐藏服务器的真实 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);
})

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