[Webpack]webpack-dev-server设置多个路径代理时，proxy顺序有要求

于 2024-08-06 18:36:31 发布
阅读量128 收藏 1
点赞数 2
分类专栏： 构建 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41790461/article/details/140962512
版权

问题背景

前端需要调用多个不同的后台时需要使用devServer.proxy做代理

问题现象

如下图设置ETL相关接口路径代理之后
在这里插入图片描述
调用ETL后台接口时产生404报错
在这里插入图片描述

问题原因

devServer.proxy在解析代理路径并替换的时候是按顺序解析的，我配置的三个代理中，/csm/etl与/csm存在包含关系，所以在执行了第二个配置，把/csm替换为/之后，包含/csm/etl路径的接口全都被修改了；接下来再按第三个配置去匹配/csm/etl的路径就找不到了，所以接口会提示404报错

解决方法

修改配置的顺序，将复杂的路径匹配放到前面进行匹配，把被包含的元数据配置放到最后，如下图：
在这里插入图片描述
避免了代理干扰，代理成功，接口就掉通了

引申思考

如果多个配置之间互相存在多层的包含关系，则应该按照复杂程度大->小依次写入配置,如下图：
在这里插入图片描述

注意

修改webpack-dev-server配置后需要重启前端项目才能生效

兴趣使然的码仔
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-dev-server的代理（proxy）
Meskjei的博客
09-06 6721
文章目录引入proxy 引入 先看一个例子： import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import axios from 'axios'; class App extends Component { componentDidMount(){ axios.get(...
webpack-dev-server实现静态资源加载和proxy代理
鸭绒的博客
07-26 7674
文章目录webpack Dev Server配置选项1.静态资源访问2.Proxy 代理小结 webpack Dev Server webpack-dev-server 是 Webpack 官方推出的一款开发工具，根据它的名字我们就应该知道，它提供了一个开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。 Webpack 官方推出 webpack-dev-server 这款工具的初衷，就是为了提高开发者日常的开发效率，而且它是一个高度集成的工具，使用起来十分的方便。 webp
Vue学习：webpack-dev-server和nginx问答
热门推荐
百锦再的博客
04-22 7万+
这在大多数情况下是可行的，但如果你的后端服务器对请求的 Origin 属性有严格的检查，或者你需要代理到不同的域，那么你就需要设置 changeOrigin 为 true。当 changeOrigin 设置为 true 时，如果原始请求中的 Origin 是 http://localhost:8080，那么在代理请求中，Origin 会被修改为 https://api.example.com。需要注意的是，pathRewrite 的配置应该根据你的实际后端API路径和你想要的前端请求路径来设置。
【前端】webpack5使用webpack-dev-server实现热更新和代理
小绵杨
09-07 3111
【前端】webpack5的配置及基本使用。【前端】webpack5常用loader和plugin。今天我们来看一下webpack-dev-server，它是什么呢？大家有没有发现，在前面两篇博客的例子中，我们每次修改完js文件后，都需要再次打包，然后再用浏览器打开生成的html文件。但是我们在使用vue-cli开发项目时，一修改文件，就会立刻重新编译，然后页面自动发生变化，webpack-dev-server就是完成这一功能的。webpack-dev-server就是一个小型的静态文件服务器。
webpack-dev-server，proxy代理
canxiaoL的博客
07-18 185
如果使用了webpack-dev-server，大概率是要配置代理的。
使用webpack-dev-server设置反向代理解决前端跨域问题
qq_33699819的博客
04-12 2262
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = require("path"); module.exports = { ...
webpack-dev-server【devServer属性配置】
qq_37833745的博客
11-12 1万+
前言： DevServer是webpack开发服务器。 webpack-dev-server： 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器 特点： 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器 减少磁盘的读取，提高构建效率 写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置 安装：下载安装...
webpack 之 webpack5 webpack-dev-server 版本兼容问题
shenjing_Shining的博客
11-11 4372
在写
9. 重学webpack——webpack-dev-server使用详解
2024路在何方
07-29 1241
推荐：《webpack学完这些就够了》 《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。 以下是本节正文： webpack-dev-server使用详解 webpack-dev-server是开发服务器的配置，本质是启动了一个express服务器 下面，看一下常用的配置项及其作用： publicPath: 详解可以参照
webpack-使用webpack-dev-server.rar
04-12
`webpack-dev-server` 是 Webpack 提供的一个本地开发服务器，它极大地提高了前端开发效率，因为它提供了实时重载（live reloading）和热模块替换（hot module replacement）等功能。 **实时重载（Live Reloading）...
详解webpack-dev-server 设置反向代理解决跨域问题
12-10
一、设置代理的原因 ...webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了： var webpack = require('webpack'); var WebpackDevServer = require("webpack-dev-serv
详解Webpack-dev-server的proxy用法
10-18
主要介绍了详解Webpack-dev-server的proxy用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解webpack-dev-server使用http-proxy解决跨域问题
01-19
http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件（webpack.config.js）中进行配置 module.exports = { ...此处省略一万字 // webpack-dev-server...
使用webpack-dev-server处理跨域请求的方法
08-27
webpack-dev-server是webpack的一个插件，它可以用来创建一个开发服务器，以便在开发过程中实时预览和热加载项目。同时，它也可以用来代理跨域请求。 使用webpack-dev-server处理跨域请求的方法非常简单。首先，...
Vue.js 框架兼容 Internet Explorer (IE) 浏览器指南
qq_42072014的博客
08-06 503
通过以上步骤，你现在已经了解了如何确保Vue.js应用在IE11浏览器上正常运行。需要注意的是，支持IE可能会增加额外的工作量，尤其是在处理一些现代Web API时。如果可能的话，考虑逐步减少对IE的支持，转而专注于现代浏览器，以简化开发流程并提高应用性能。
Vite与Webpack的区别
最新发布
qq_43692768的博客
08-06 190
在开发过程中会对整个应用或者大部分应用进行打包，对于大型应用而言,这个打包过程非常的耗时，可能会出现启动和编译缓慢的问题。而言，在开发模式时启动不进行打包，也就意味着它不需要构建模块之间的依赖关系，不需要编辑，所以启动速度非常快。在设计上更注重开箱即用，大部分场景下用户无需自己写配置文件，只需指定一些基本的选项就可以开始开发。的配置相对复杂，需要针对具体项目进行不同的配置，且需要理解各种插件、在开发模式下依然会对所有模块进行打包操作，会将所有模块打包为一个。在开发模式下，没有打包的步骤，它利用了浏览器的。
Webpack、Vite区别知多少？
2401_85955297的博客
07-27 1513
Webpack、Vite区别知多少？我们常用的前端构建工具webpack、vite
Webpack插件
yang295242361的博客
08-06 233
/在chainWebpack中新增以下代码，大概是config.module.rule('images')..loader('image-webpack-loader')一些性能开销较大的loader前面添加cache-loader，将结果缓存在磁盘中减少编译时间。loader，如：（css-loader 、vue之前添加 cache-loader，）//使用场景：设置false，对流量不必要的损耗。//用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。
webpack-dev-server 2.9.7 配置反向代理 404
09-06
要解决webpack-dev-server 2.9.7配置反向代理出现404错误的问题，可以按照以下步骤进行操作。 首先，在webpack配置文件中找到devServer对象，该对象用于配置webpack-dev-server的相关选项。在devServer中添加如下代码： ```javascript devServer: { proxy: { '/api': { target: 'http://example.com', pathRewrite: { '^/api' : '' } } } } ``` 这里的`/api`是指将以`/api`开头的请求转发到`http://example.com`，并且`pathRewrite`用于将实际请求路径中的`/api`重写为空，这样请求过程中就不会包含`/api`了。 然后，根据实际情况修改`target`的值为你想要转发到的目标服务器的地址。 接下来，在代码中使用`axios`或类似的库进行ajax请求时，请求的URL可以直接使用以`/api`开头的路径，webpack-dev-server会自动将该请求转发到目标服务器，并且返回对应的响应。 最后，重新运行webpack-dev-server命令，查看控制台输出的相关信息，确保没有出现错误。 通过上述步骤，就可以实现在webpack-dev-server中配置反向代理，并解决404错误的问题。如果仍然出现404错误，可以检查目标服务器是否正常运行，并确保proxy配置正确无误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值