proxy网络代理和axios的baseURL配置转换结果 axios代码 vite配置浏览器控制台url http:

因为项目中的代理配置不经常动，有点忘了，记一下

示例分析
1. 首先我们有一个路径
```
axios.get("/api1111/string");
```
因为没有配置baseURL，所以完整的路径(也是控制台的路径)
```
http://localhost:5173/api1111/string
```
1. 由于目标服务器是 http://localhost:3008，而当前页面运行在 http://localhost:5173，浏览器会阻止这种跨域请求。为了解决跨域问题，需要配置代理。
```
//配置代理
  server: {
    proxy: {
        "/api1111": {
            target: "http://localhost:3008",// 目标服务器地址
            changeOrigin: true, // 允许跨域
            rewrite: (path) => path.replace(/^\/api1111/, ""), // 重写路径
        },
    },
},
```
1. 配置以上的代理的工作流程
  1. 捕获请求
    - 当发起请求 axios.get("/api1111/string") 时，Vite 的开发服务器会检查请求路径是否匹配代理规则。
    - 代理规则中配置了 /api1111，因此请求路径 /api1111/string 会被捕获。（这个是以开头来匹配的）
  2. 重写路径
    - 代理会调用 rewrite 函数，将路径中的 /api1111 前缀去掉。
    - 重写后的路径是 /string。
  3. 转发请求
    - 代理将请求转发到目标服务器 http://localhost:3008，并将路径替换为重写后的路径 /string。
    - 实际请求的 URL 是：
```
http://localhost:3008/string
```
  4. 修改请求头由于配置了 changeOrigin: true，代理会修改请求头中的 Origin 为目标服务器的地址（http://localhost:3008），以解决跨域问题。
  5. 返回响应
    1. 目标服务器处理请求后，将响应返回给代理。
    2. 代理将响应返回给前端。
ps:浏览器的url构成是：协议、域名、端口、路径、查询参数和片段标识符，上面的pathRewrite替换主要是对路径的操作

转换结果

axios代码
```
axios.get("/api1111/string");
```

vite配置

server: {
    proxy: {
    "/aaaa": {
        target: "http://localhost:3008",
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/aaaa/, ""), // 重写路径
    },
    },
}

浏览器控制台url http://localhost:5173/api1111/string
实际访问地址 http://localhost:3008/string

Q
- 如果我配置了baseURL = 'pcapi-xiaotuxian-front-devtest.itheima.net'，同时又配置了‘/api'的proxy，…
  - 会先进行axios的完整路径拼接，再进行proxy代理操作，所以proxy只对'/api'开头的生效，对配置了baseUrl的完整路径的不生效
  - 怎么处理这个问题？
    - 绝对路径默认不会走代理，因为 Vite 的代理只对相对路径生效。如果你需要使用绝对路径，可以通过以下方式实现代理：
      - 将绝对路径改为相对路径。
      - 动态替换请求路径。
      - 使用 axios 拦截器动态修改请求 URL。

一般来说项目中axios的baseURL怎么配置？以vite为例

axios.defaults.baseURL = import.meta.env.MODE === 'development' ? '/api' : 'https://production-server.com';