webpack-dev-server代理未转发Post请求Body内容

最新推荐文章于 2023-05-25 18:25:45 发布
最新推荐文章于 2023-05-25 18:25:45 发布
阅读量3.2k 收藏 14
点赞数 14
分类专栏： JavaScript Vue webpack 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuse6262/article/details/107393394
版权
在Vue-cli和axios开发中遇到跨域问题，使用webpack-dev-server代理时，发现Content-Type为application/json的POST请求Body在代理过程中消失。通过Postman和Wireshark分析，确认问题出在前端代理，非后端。研究源码和社区问题后，发现bodyParser和http-proxy-middleware可能同时编码Body导致问题。解决方案是调整两者执行顺序或使用http-proxy-middleware的onProxyReq方法处理请求Body。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

今日在使用Vue-cli + axios开发的过程中，遇到了跨域问题(此处对于跨域就不详解了，请点击此处传送门)，于是就利用devServer的HTTP代理功能来解决跨域，但是此时就遇到了一个棘手的问题：使用代理之后，Content-Type为application/json的HTTP Post请求在代理转发时，Body竟然神奇的消失了

以下我将附上我所遇到问题时的解决思路，以及问题更加详细描述，如果不敢兴趣可直接预览最后的解决方案章节

解决思路

一开始我以为是后端的问题，但是通过Postman发送同样的请求以及wareShark抓包，我将问题定位到了前端代理上：

以下附上Postman截图：
在这里插入图片描述
在这里插入图片描述
从上图可得出以下信息 Content-Type: application/json，可以正常的被后端解析

那么从上就可以确定后端服务器是正常的，真正的问题在于前端

于是我使用chrome抓取的浏览器的Http包，得到以下截图
在这里插入图片描述
上图可看到，在请求到达localhost:9527代理服务器时，无论Body还是Header都是正常的，那么可以肯定并不是我代码写错了而导致的乌龙

为了验证是代理的问题，我通过wareShark进行了抓包分析，并得到了以下结论
1. 使用Content-Type: application/json格式的HTTP Post请求的Body内容无法通过代理转发到后端

最低0.47元/天 解锁文章
Webpack-dev-server HMR信息泄露漏洞（CVE-2018-14732）
jammny
02-01 2128
漏洞详情 webpack-dev-server是一款主要用于测试的开发服务器。 webpack-dev-server 3.1.6之前版本中的lib/Server.js文件存在安全漏洞，该漏洞源于程序没有检测请求包头中的Origin字段。攻击者可通过从任意来源连接ws://127.0.0.1:8080/利用该漏洞接收WebSocket服务器发送的HMR消息。 漏洞影响 webpack-dev-server 3.1.6之前版本 漏洞分析 漏洞利用 为了省去繁琐的配置，这里以 Vue.js 脚手架里的
webpack学习之路（三）webpack-dev-middleware
weixin_33989780的博客
06-06 3155
上一节，学习到通过webpack-dev-server搭配HotModuleReplacementPlugin插件可以实现不刷新页面的模块热更新。 最后讲解原理的时候，我们知道webpack-dev-server在内部使用Express搭建搭建了一个小型Node服务来接收处理后的文件，那是什么程序传递文件的呢？ 就是webpack-dev-middleware。 webpack-dev-middl...
解决webpack dev-server不能匹配post请求的问题
10-18
主要介绍了解决webpack不能匹配post请求的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack中devServer开发获取post参数
qq_45856865的博客
12-31 1642
//config.js文件 const bodyParser = require('body-parser') module.exports = { devServer: { before(app) { app.use(bodyParser.json()) //通过bodyParser获取req.body app.post('/api/login',...
解决webpack中dev-server不能匹配post请求的问题
qq_33207773的博客
05-23 3698
解决webpack不能匹配post请求的问题 webpack的dev-server只能匹配get请求，在本地做本地数据的时候会很不方便。 可以使用如下两种办法解决： 1.在webpack.config.js配置文件中的devServer字段加入 devServe:{ setup: (app) => { //解决post没响应的问题 app...
webpack-dev-server小知识，onProxyReq是干嘛的？
weixin_34343308的博客
02-19 8094
dev-server的proxy有两个事件“onProxyReq”，“onProxyRes”，可以在请求发送前和响应后对请求内容进行更改。 onProxyReq的第一个参数proxyReq是node http.ClientRequest的实例，后两个参数req和res分别是Express框架封装的Request对象和Response对象 onProxyRes的第一个参数proxyRes则是 n...
详解webpack-dev-server使用http-proxy解决跨域问题
08-28
Webpack Dev Server 是一款在开发环境下用于提供实时编译和热加载功能的工具，极大地提高了前端开发效率。在实际开发中，我们经常会遇到跨域问题，这是因为浏览器的安全策略限制了不同源之间的请求。本文将详细介绍...
Webpack devServer中的 proxy 实现跨域的解决
08-27
Webpack devServer 会自动将这个路径加上当前服务器的基路径，然后利用 `proxy` 设置将请求转发到目标服务器。 ```javascript // jQuery 示例 $.ajax({ url: '/test/testFetch/Login.php', type: 'post', data: ...
webpack中使用devServer接收POST请求传来的值
Y_X_gang的博客
01-14 765
webpack中使用devServer接收POST请求传来的值 const bodyParser = require('body-parser') ... module.exports = { devServer: (app) => { app.use(bodyParser.json()) app.post('/api/getList', (req, res) => { console.log(req.body) res
webpack(9)_使用webpack-dev-server
renzhongrui的博客
08-26 606
webpack-dev-server 1、介绍 安装 npm install webpack-dev-server --save-dev 1、live reloading 2、路径重定向 3、https 4、浏览器中显示编译错误 5、接口代理 6、模块热更新...
Gateway网关参数进行验签POST 包含requestbody 请求体封装
LMC技术人生专栏
05-25 2904
Gateway网关自定义拦截器的不可重复读取数据问题_java 对get post请求的参数进行验签 排序所有参数验签
webpack的devServer响应拦截
SCUhzs
03-31 683
webpack的devServer响应拦截
webpack-dev-server进行跨越处理
weixin_42727360的博客
05-10 298
webpack-dev-server开发时可以使用devServerd 的proxy解决。 比如我前端的路径为http://localhost:8888，而后端启动的服务为http://localhost:8080，正常来说我们应该在写向后端请求时用8080的接口，比如正常情况下我向后端请求的数据接口为http://localhost:8080/SSM/help/getHelpList，但是会有跨...
vue devserver post失败_Vue学习3（拉取数据）
weixin_39922374的博客
11-25 353
1，跨域：我们的程序是在127.0.0.1:8080跑的，不能请求192.168.2.250/news的，因为ip不同，这个就是跨域限制。CORS跨域，代理跨域2，axios，底层是ES5的Promisenpm install --save axiosAjax要在一个“生命周期”叫做created中发出，created表示组件已经创建完毕。是时候请求数据了。使用方法：axios.get(网址).t...
vue devserver post失败_Vue+Ant Design Vue+Mockjs----mock篇
weixin_39605647的博客
11-25 296
mock 介绍mockjs官方使用文档目的方便生成随机数据，拦截Ajax请求。  偶尔会写一些前端的项目，参考一些比较知名的UI框架，里面很多例子都会把数据直接写在里面，作为参考，因此很多项目里面也会这样手写数据，直接写死在前端，将代码与mock数据紧密结合在一起，每次需要修改数据，都需要直接改动到代码层，前端本身改动就非常大，如此频繁的修改代码层面显然不是很好的实践。同时手写的数据，美观与真实性...
webpack proxy的代理、抓包、跨域、重写代理路径、改头信息、webSocket（前后端分离必备）
热门推荐
谢泽的网络日志
12-24 1万+
在用vue做了3年前后端分离之后（通过anyproxy做代理），才发现webpack自带更方便的代理 配置文件 找到文件/config/index.js 在proxyTable选项增加下面的配置，可配置多个不同的代理 proxyTable: { '/dev': { target: 'http://www.baidu.com:80', chan...
vue的axios使用时，Content-Type 引发的参数接收不到的问题回顾
weixin_40402192的博客
10-19 1万+
问题来源： 在使用axios时，和java小哥联调，发现调接口服务器始终拿不到参数data，但是检查network也的确传了data，好奇之下，拿了以前的项目翻了下，才有了该文章。   基于 vue-axios 和 $.ajax 两种请求方式中数据传输的思考 以java为例，数据传输的起源： 一开始，Java为了实现前后端通信，在http协议允许下，制定了数据传输必须遵守的规则：  1)...
vue devserver post失败_用Spring Boot+Vue做微人事项目第三天
weixin_40008339的博客
11-25 168
用Spring Boot+Vue做微人事项目第三天前两天把微人事项目的登录的前端页面和后台接口都写完了，现在开始做前后端接口的对接了，前后端接口的对接就需要用到axios来发送我们的网络请求​把失败信息统一封装起来，不需要去各个页面去处理这个问题在vuehr项目中创建一个api.js文件，①.首先把下载好的axios通过`import axios from 'axios'`导入进来②.通过impo...
webpack中devServer.before实现post转get
最新发布
06-07
在Webpack DevServer中使用`devServer.before`选项可以实现对请求的拦截和处理。如果你想要将POST请求转换为GET请求，可以通过中间件来实现。以下是一个简单的示例： ```javascript devServer: { before: function(app, server) { // 将所有的POST请求转换为GET请求 app.post('*', function(req, res) { // 在这里可以对请求进行一些处理 const url = req.originalUrl.replace(/^\/api/, ''); const query = Object.assign({}, req.query, req.body); const params = Object.keys(query).map(key => `${key}=${query[key]}`).join('&'); const redirectUrl = `${url}?${params}`; res.redirect(301, redirectUrl); }); } } ``` 在上面的示例中，我们将所有的POST请求重定向到一个GET请求，并且将POST请求的参数转换为GET请求的参数。实际使用时，你可以根据自己的需求对请求进行更加复杂的处理。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值