Live Server代理实现

作者: 夜泊1990
企鹅: 1611756908
Q 群: 948233848
邮箱: hd1611756908@163.com
博客: https://hs-an-yue.github.io/
B 站: https://space.bilibili.com/514155929/

---

第一章 Live Server介绍

Webpack Dev Server: 是 Webpack 提供的一个开发辅助工具
	1. HTTP开发服务器
	2. 打包
	3. 服务器代理
	4. 页面实时刷新
	...

Vite: 是一种新型前端构建工具
	1. HTTP开发服务器
	2. 打包
	3. 服务器代理
	4. 页面实时刷新
	...

Live Server:
	1. HTTP开发服务器
	2. 页面实时刷新
	3. 不支持打包
	4. 不支持代理

第二章 为什么添加代理

浏览器不允许在前端页面中跨域访问后端服务器接口，为了解决这个问题，将前端发送的请求，转发到前端自己的服务器,然后前端自己的服务器帮助调用后端接口，这样将浏览器直接向后端发送请求转换成，浏览器发送请求到自己的前端服务器，前端服务器在向后端转发请求，尽管也跨域但是服务器调用服务器不会出现跨域问题，跨域只有浏览器才会出现。

第三章 代理实现

前端开发工具采用 Visual Studio Code 

配置方式

第一步: 创建一个新的web项目或者导入一个已有的项目(纯HTML项目)
第二步: 在项目的根目录下创建一个文件夹(.vscode)，不要忘记点
第三步: 在.vscode文件夹中创建一个settings.json文件
第四步: 在settings.json文件中设置以下内容

{
  "liveServer.settings.port": 5500, //当前前端HTTP服务器启动的默认端口号
  "liveServer.settings.proxy": {
    "enable": true, //开启代理
    "baseUri": "/api", //前端代理(使用此地址代替后端服务器地址)
    "proxyUri": "http://127.0.0.1:8080" //服务器地址
  }
}

代理服务配置预览

每走一步,都是进步.