聊一聊 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 启动项目测试


相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui