webpack代理proxy配置

简介: 前端项目开发中我们经常会用到 proxy 代理来解决接口跨域问题,通常是在 webpack.config.js 或 vue.config.js 或 vite.config.js 中配置

前端项目开发中我们经常会用到 proxy 代理来解决接口跨域问题,通常是在 webpack.config.js 或 vue.config.js 或 vite.config.js 中配置:

devServer: {
   proxy: {
     '/api': {
       target: 'http://localhost:3000',
       changeOrigin: true,
       pathRewrite: { '^/api': '' },
     },
   },
 }

webpack 中的服务器工具 webpack-dev-server,实质上是启动了一个 express 服务器。proxy 代理是利用 http-proxy-middleware 这个http代理中间件(vite 是用的 http-proxy,其实 http-proxy-middleware 也是基于 http-proxy 的),实现将请求转发给其他服务器。

背后其实都是使用 node 来启动 server 服务器,这也是为什么我们常说这种代理只能在开发阶段使用,因为 build 生产包时我们并不会打包一个 node 服务器进去,线上要实现代理一般直接通过 nginx 来配置。

node 代理服务器示例

const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()

app.use('/api', proxy({
  target: 'http://www.cafe123.cn',
  changeOrigin: true
}))
app.listen(3000)

proxy 配置参数

target

url string to be parsed with the url module,target host to proxy to. (protocol + host),要代理访问的目标主机(协议 + 主机),如:http: //cafe123.cn、http://192.168.2.228:8088/api/

changeOrigin

true/false, Default: false - changes the origin of the host header to the target URL,for virtual hosted sites,needed for virtual hosted sites. 改变请求 host 头,默认是 false,项目中或网上很多地方都能看到会给设置成 true。

看名字会以为修改的是 Origin 头,实际上改的是 Host 头,感觉应该叫 changeHost 更合理呢,修改的也就是我们发送请求时 Request Headers 里的参数。

在浏览器中我们即使设置为 true,会发现请求头里的 Host 和 Origin 都是不会发生任何变化的,因为这歌修改是代理服务器所做的操作,所以要在服务器端去查看请求头里的信息就能看到两者的不同了。

Host 请求头表示请求资源的网络主机和端口号,是 HTTP/1.1 版本中为了解决虚拟主机的问题,所以这个参数和跨域没啥关系,其实我们压根不用设置,保持默认的 false 就可以了。

pathRewrite

(object/function) Rewrite target's url path. Object-keys will be used as RegExp to match paths.路径重写,可以是对象,也可以是函数:

// rewrite path 重写路径
pathRewrite: {'^/old/api' : '/new/api'}

// remove path 移除路径
pathRewrite: {'^/remove/api' : ''}

// add base path 添加基础路径
pathRewrite: {'^/' : '/basepath/'}

// custom rewriting 路径自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

// custom rewriting, returning Promise 路径自定义,返回 Promise
pathRewrite: async function (path, req) {
  const should_add_something = await httpRequestToDecideSomething(path)
  if (should_add_something) path += 'something'
  return path
}

axios

项目中使用 axios 发送请求,我们一般通过 axios.default.baseURL 来设置默认的基础请求地址,如果不设置我们本地就是默认的 localhost:8080 之类的,具体请求接口中的 url 我们一般只用写接口 path 就可以了。

写代理路径时,要注意下 axios.default.baseURL 和接口里的 url。

目录
相关文章
|
7天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
22 5
|
8天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
35 7
|
10天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
27天前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
69 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
8天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
21 2
|
10天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
22天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
46 1
|
22天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
39 2
|
2月前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
82 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)