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

webpack 和 vite

  • webpack
  • Vite
  • [重新编辑的问题 `changOrigin: true`](#重新编辑的问题 changOrigin: true)
  • [如何定义 /api ?](#如何定义 /api ?)

webPack And Vite 都是两个比较好用的打包工具,尤其是 Vite, 几几年流行忘记了,特色就是服务启动极快,实现预加载,感觉 webPack 要比 Vite 要复杂一点,不过两者都是比较好的打包工具
今天想聊一聊关于 webPackVite 的开发代理模块的使用

webpack

以下功能,是在 webpack.config.js 中配置,的 devServer.proxy 代理模块

就是可以代理以 /api 开头的请求到目标服务器上
另外说一下这个 pathRewrite 模块的替换空字符串功能

pathRewrite 配置项用于在代理过程中重写请求路径。具体到你的示例代码中,^/api 表示以 /api 开头的路径,而替换为空字符串的意思是在代理请求时将路径中的 /api 替换为空字符串

|

举个例子,如果有一个前端请求 /api/data,通过配置 pathRewrite: { '^/api': '' },则代理服务器会将该请求代理到目标服务器的 /data 路径上

|

这样做的目的通常是因为前端与后端定义接口时可能统一加了一个 /api 前缀,但实际代理到后端时并不需要这个前缀,因此需要在代理过程中将其去除

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

Vite

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

js 复制代码
// 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)

它应该是这样的

js 复制代码
import axios from "axios";

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

调接口时应该这样使用

js 复制代码
import {
  service
} from './request'

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

配置完后尝试使用 webPackVite 启动项目测试


相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript