聊一聊 webpack 和 vite 的开发服务代理的问题

webPack And Vite 都是两个比较好用的打包工具，尤其是 Vite, 几几年流行忘记了，特色就是服务启动极快，实现预加载，感觉 webPack 要比 Vite 要复杂一点，不过两者都是比较好的打包工具

今天想聊一聊关于 webPack 和 Vite 的开发代理模块的使用

webpack

以下功能，是在 webpack.config.js 中配置，的 devServer.proxy 代理模块
就是可以代理以 /api 开头的请求到目标服务器上

另外说一下这个 pathRewrite 模块的替换空字符串功能

pathRewrite 配置项用于在代理过程中重写请求路径。具体到你的示例代码中，^/api 表示以 /api 开头的路径，而替换为空字符串的意思是在代理请求时将路径中的 /api 替换为空字符串
|
举个例子，如果有一个前端请求 /api/data，通过配置 pathRewrite: { '^/api': '' }，则代理服务器会将该请求代理到目标服务器的 /data 路径上
|
这样做的目的通常是因为前端与后端定义接口时可能统一加了一个 /api 前缀，但实际代理到后端时并不需要这个前缀，因此需要在代理过程中将其去除

// ... 其他配置
devServer: {
  proxy: {
    '/api': {
      target: 'http://target.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

Vite

其实 Vite 的服务代理也是差不多一样的写法

// vite.config,js
export default {
  // ... 其他配置
  proxy: {
    '/api': {
      target: 'http://target.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '') // 这里是将 /api 替换为空字符串
    }
  }
}

重新编辑的问题 changOrigin: true

代理服务器在转发请求时将origin请求头更改为目标 URL，这样就可以解决一些因跨域或 host 不一致导致的问题

如何定义 /api ?

在前端项目定义 util 文件夹下的 request.js / request.tsx 使用 BASEURL 定义(一般都是声明为 BASEURL)

它应该是这样的

import axios from "axios";

export const service = axios.create({
  baseURL: "/api",
  timeout: 10000,
});

调接口时应该这样使用

import {
  service
} from './request'

// 获取本机账号信息
export const getUserData = () => {
  return service({
    url: "/getCurrentSummoner",
    method: "get",
  });
}

---

配置完后尝试使用 webPack 或 Vite 启动项目测试

---