转行小白历险记-2023.12.19 如何解决跨域问题

讨厌突如其来的破坏计划的感觉，真的好烦

一、跨域以及如何解决跨域问题(反向代理)

1. 跨域

   1. 同源：协议、端口、域名相同

2. 如何解决跨域问题

   1. jsonp:<script> 不受同源策略限制
   2. 跨源域资源共享 CORS:允许 Web 应用服务器进行跨源访问控制
   3. 使不同的源变成同源

3. 什么时是反向代理

   1. 代理：请求转发
   2. 正向代理：客户端告诉代理服务器的地址
   3. 反向代理：客户端只需要告诉需要的东西

二、介绍 vite

1. 由两个部分组成

   1. 开发服务器:基于ES模块提供丰富的内建功能
   2. 构建指令:使用 Rollup 打包代码，提供预设配置

2. 热更新：

   1. 修改的东西会立刻反应到页面上，叫做热更新

3. 为什么选择vite

   1. 启动本地开发服务器的时间会很久

      1. 依赖:使用 esbuild 进行依赖预打包，esbuild 使用 Go 编写，会比javascript-based 的打包工具快 10-100 倍
      2. 源码:使用浏览器原生es module 提供源码，让浏览器接管打包工具的部分工作

   2. 热更新也会很慢

      1. 使用ESM 不需要重新编译:一些打包工具的开发服务器在文件更改时，需要重新构建整个项目，来获取新的模块依赖关系
      2. 使用浏览器缓存加速:Vite 利用HTTP头来加速整个页面的重新加载

三、使用vite配置请求代理

使用 Vite 或 Webpack Dev Server

在开发环境中，可以在 Vite 或 Webpack Dev Server 中配置反向代理：

// Vite 配置示例
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 后端服务器地址
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}