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


相关推荐
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
attitude.x4 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java4 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)4 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术5 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫5 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css