2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据

Vue.js反向代理配置与使用详解

原创

已于 2022-10-18 14:54:12 修改 · 601 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #服务器 #axios #跨域 #代理模式

于 2021-11-03 18:58:10 首次发布

本文介绍了反向代理的基本概念，包括正向代理和反向代理的区别。重点讲解了在Vue项目中为何需要配置反向代理，主要是为了解决前后端分离时的跨域问题。文中通过步骤演示了如何在vue.config.js中配置反向代理，并展示了如何使用axios进行数据获取。

文章目录

0.反向代理是什么?

1、正向代理(forward proxy)

客户端想要访问一个服务器，但是它可能无法直接访问这台服务器，
这时候这可找一台可以访问目标服务器的另外一台服务器，
而这台服务器就被当做是代理人的角色 ，称之为代理服务器，
于是客户端把请求发给代理服务器，
由代理服务器获得目标服务器的数据并返回给客户端。
客户端是清楚目标服务器的地址的，而目标服务器是不清楚来自客户端，
它只知道来自哪个代理服务器，所以正向代理可以屏蔽或隐藏客户端的信息。

在这里插入图片描述

2、反向代理(Reverse proxy)

从上面的正向代理，你会大概知道代理服务器是为客户端作代理人，
它是站在客户端这边的。其实反向代理就是代理服务器为服务器作代理人，站在服务器这边，
它就是对外屏蔽了服务器的信息，常用的场景就是多台服务器分布式部署，
像一些大的网站，由于访问人数很多，就需要多台服务器来解决人数多的问题，
这时这些服务器就由一个反向代理服务器来代理，
客户端发来请求，先由反向代理服务器，
然后按一定的规则分发到明确的服务器，
而客户端不知道是哪台服务器。常常用nginx来作反向代理。

在这里插入图片描述