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


相关推荐
神夜大侠16 分钟前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱19 分钟前
【Electron】Electron Forge如何支持Element plus?
前端·javascript·vue.js·electron·node.js
柯南二号1 小时前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts
wyy72931 小时前
v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
前端·ui·html
前端郭德纲1 小时前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6
王解1 小时前
【模块化大作战】Webpack如何搞定CommonJS与ES6混战(3)
前端·webpack·es6
欲游山河十万里1 小时前
(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数
前端·ecmascript·es6
明辉光焱1 小时前
【ES6】ES6中,如何实现桥接模式?
前端·javascript·es6·桥接模式
PyAIGCMaster2 小时前
python环境中,敏感数据的存储与读取问题解决方案
服务器·前端·python
baozhengw2 小时前
UniAPP快速入门教程(一)
前端·uni-app