使用 vite 配置请求代理

 介绍vite

        vue官方提供的前端构建工具。

由两个部分组成

        开发服务器：基于ES模块提供丰富的内建功能

        构建指令：使用 Rollup 打包代码，提供预设配置

Rollup：

        Rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个单独的文件。与其他打包工具（如 Webpack）不同，Rollup 更注重于创建小型、高效的打包文件，适用于构建库、框架和组件等应用场景。

Rollup 采用 ES6 模块的标准语法，可以将代码转换为标准的 ES5 语法，并且支持 Tree Shaking 特性，可以识别并删除未使用的代码，使打包后的文件更小、更高效。

使用 Rollup 打包代码可以提供更小的文件体积和更好的性能，同时还可以通过插件系统扩展其功能，例如添加压缩插件来进一步减小文件体积。

优化两个地方

        开发服务器启动

        热更新

使用vite配置请求代理

vite 配置

        在项目的vite.config.ts文件中配置。

什么是跨域？

        同源：两个url请求的协议 protocol、端口 port、域名 host 相同就是同源

        跨域：就是不同源的url请求

为什么限制跨域？

        出于安全性，浏览器会限制脚本内发起跨源 HTTP 请求 （XMLHttpRequest 和 Fetch API）。

        web 应用请求

                只能从加载应用程序的同一个请求 HTTP 资源。

                除非包含 CORS 响应头。

如何解决跨域问题

        常用方法：

                jsonp：<script> 不受同源策略限制

                跨源域资源共享 CORS：允许web应用服务器进行跨源访问控制

                使不同源变成同源（使用反向代理）

什么是反向代理？

        代理：请求转发

                客服端与服务端之间通过代理服务器进行请求。

        

        代理服务器类型：

                正向代理： 客户端告诉代理服务器资源地址。例如带电话，告诉服务商打给谁。

                反向代理：客户端只告诉代理服务器想要什么资源。不知道具体地址。

反向代理如何解决跨域问题？

        通过反向代理服务器分配不同标识进行访问，不同的域服务端