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

最新推荐文章于 2023-03-31 18:17:22 发布
最新推荐文章于 2023-03-31 18:17:22 发布
阅读量3.1k 收藏 14
点赞数 14
分类专栏： JavaScript Vue webpack 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuse6262/article/details/107393394
版权
问题描述今日在使用Vue-cli + axios开发的过程中，遇到了跨域问题(此处对于跨域就不详解了，请点击此处传送门)，于是就利用devServer的HTTP代理功能来解决跨域，但是此时就遇到了一个棘手的问题：使用代理之后，Content-Type为application/json的HTTP Post请求在代理转发时，Body竟然神奇的消失了以下我将附上我所遇到问题时的解决思路，以及问题更加详细描述，如果不敢兴趣可直接预览最后的解决方案章节解决思路一开始我以为是后端的问题，但是通过Postman发
摘要由CSDN通过智能技术生成

问题描述

今日在使用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内容无法通过代理转发到后端
2. 使用Content-Ty

最低0.47元/天 解锁文章
我爱吃烤鸡翅 : )
关注
  • 14
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
解决webpack dev-server不能匹配post请求的问题
12-11
webpack的dev-server只能匹配get请求，在本地做本地数据的时候会很不方便。 可以使用如下两种办法解决： 1.在webpack.config.js配置文件中的devServer字段加入 devServe:{ setup: (app) => { //解决post没响应的问题 app.post('/goform/**', function(req, res) { res.redirect(req.originalUrl); //重定向到对应路径 }); } } @webpack3.0以后的版本setup需要改成before 2.在
详解webpack-dev-server使用http-proxy解决跨域问题
08-28
Webpack Dev Server 是一款在开发环境下用于提供实时编译和热加载功能的工具，极大地提高了前端开发效率。在实际开发中，我们经常会遇到跨域问题，这是因为浏览器的安全策略限制了不同源之间的请求。本文将详细介绍...
webpack的devServer响应拦截
SCUhzs
03-31 483
webpack的devServer响应拦截
webpack proxy的代理、抓包、跨域、重写代理路径、改头信息、webSocket（前后端分离必备）
谢泽的网络日志
12-24 1万+
在用vue做了3年前后端分离之后（通过anyproxy做代理），才发现webpack自带更方便的代理 配置文件 找到文件/config/index.js 在proxyTable选项增加下面的配置，可配置多个不同的代理 proxyTable: { '/dev': { target: 'http://www.baidu.com:80', chan...
在vue项目中，部分数据使用Mock，部分数据使用devServer.proxy 进行跨域代理访问后端，post、put方法提交失败（超时）
qq_40820382的博客
04-09 1159
问题描述： 我的项目是基于Vue的后台管理系统。有些菜单是使用Mock模拟数据，有些是调用后台的。调用后台的部分，经理不准在后台配置跨域，让我们在前端开发时在前端配置跨域。所以就出现了如标题所述bug 解决办法1：把前端代理去掉，在后端配置跨域。 解决办法2：全局搜索 app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended: true })) 把其注释掉，这样一来，不去除前端代理也可以正常访问了。 补充，前端代理
webpack-dev-server小知识，onProxyReq是干嘛的？
weixin_34343308的博客
02-19 7771
dev-server的proxy有两个事件“onProxyReq”，“onProxyRes”，可以在请求发送前和响应后对请求内容进行更改。 onProxyReq的第一个参数proxyReq是node http.ClientRequest的实例，后两个参数req和res分别是Express框架封装的Request对象和Response对象 onProxyRes的第一个参数proxyRes则是 n...
Webpack devServer中的 proxy 实现跨域的解决
08-27
Webpack devServer 会自动将这个路径加上当前服务器的基路径，然后利用 `proxy` 设置将请求转发到目标服务器。 ```javascript // jQuery 示例 $.ajax({ url: '/test/testFetch/Login.php', type: 'post', data: ...
web-dev-tutorial:Web开发短期课程
05-01
每个HTML标签都有其特定的功能，比如`<head>`定义头部信息，`<body>`包含网页的主要内容，`<h1>`至`<h6>`表示不同级别的标题，`<p>`定义段落，`<a>`用于创建链接，`<img>`插入图像，`<ul>`、`<ol>`及`<li>`创建无序...
postcss-modules-example：如何使用postcss-modules插件
02-03
npm install postcss postcss-modules --save-dev ``` 接下来，创建或修改项目的 PostCSS 配置文件（如 `postcss.config.js`）： ```javascript module.exports = { plugins: [ require('postcss-modules')({ /...
webpack的CSS加载器的使用
12-13
**Webpack中的CSS加载器使用详解** 在Web开发中，Webpack是一个强大的模块打包工具，它能够处理各种类型的资源，包括CSS。CSS加载器是Webpack中的一部分，它们负责转换和处理CSS文件，使其能够在JavaScript环境中...
利用Vue CLI搭建代理服务
※老鼠拧刀满街找猫※
03-13 556
一、首先安装Nodejs http://nodejs.cn/download/ 默认安装就可以了 安装后，在控制台输入 一下命令可以查看安装的版本 node -v 二、安装Vue CLI 使用淘宝镜像【提高下载速度】 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装到全局【Nodejs的安装目录下...
webpack中devServer开发获取post参数
qq_45856865的博客
12-31 1560
//config.js文件 const bodyParser = require('body-parser') module.exports = { devServer: { before(app) { app.use(bodyParser.json()) //通过bodyParser获取req.body app.post('/api/login',...
vue开发环境手动配置Cookie
weixin_49698648的博客
08-12 1841
只需要在vue.config.js里devServer上面配置onProxyReq这个属性即可
前后端分离vue跨域，devServer配置proxy代理, post请求无法接收json格式参数报错400， Could not proxy request... ECONNRESET
可控的事情要谨慎，不可控的事情要乐观。
11-08 3366
1. 问题描述 先说下问题，项目后端是微型Python框架flask，前端是vue-element, 本地开发我配置的是proxy代理，代码如下： devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js'), proxy: { // 本地使用代
说下vue工程中代理配置proxy
weixin_30384217的博客
07-04 634
这个代理配置不需要后台进行ngnix代理跳转了，前端可以做。在vue.config.js文件中进行配置，如下： module.exports = { publicPath: process.env.VUE_APP_BASEURL || '/', // 修改webpack的配置 configureWebpack: { // 把原本需要写在webpack.config...
axios + Express + http-proxy 发送post请求后台无法接收body问题修复方法
winkay的博客
11-12 1758
技术背景：vue项目中使用axios调用接口，前端使用Express作为服务器，http-proxy作为api代理服务器。 问题描述：axios发送get请求没有问题，但是当调用post和put请求并携带body体时，请求一直卡在pending状态，后台反馈没有收到body数据，但是我在expess的proxy代理中debugger是能够看到req.body的。 原因分析：baidu+goog...
Vue 设置proxy后post请求失效，pending挂起
qq_42600948的博客
03-18 2266
proxy: { "/api": { // 测试环境 target: "http://192.168.0.79:8080", // 接口域名 changeOrigin: true, //是否跨域 pathRewrite: { "^/api": "", }, onProxyReq: function (proxyReq, req, res, options) { .
9种常见的前端跨域解决方案（详解）
MyDriverC
02-22 1万+
https://www.imooc.com/article/291931 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限制以
vue的vue.config中proxy代理post请求ECONNRESET
热门推荐
weixin_42212558的博客
08-24 3万+
环境 vue 2.6.11、vue/cli 4.4.0、Typescript 3.9.3 遇到的问题 在开发模式下，接口默认用mock进行请求。在匹配到api字符串开头的请求，则通过代理请求到真实接口http://106.xx.xxx.xxx:8080。 vue.config.js // webpack-dev-server 相关配置 devServer: { host: 'localhost', port: 3001, overlay: { warnings: f
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配置正确无误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值