解决webpack dev-server不能匹配post请求的问题

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.在node_modules里找到webpack-dev-server/lib/server.js中，在Server这个函数中，大约100行左右的地方加入如下代码。来拦截post请求。当然，路径要自己写,也可以写成上面那样。

app.post('/goform/*', (req, res) => {
res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
let filename = path.join(__dirname,'..','..','..',`public/${req.originalUrl}.txt`);

fs.exists(filename, exists => {
 if(exists) {
  fs.createReadStream(path.join(__dirname,'..','..','..',`public/${req.originalUrl}.txt`)).pipe(res);
 }else {
  res.end(`${req.originalUrl}' <- <- 老铁，这个接口你还没写。`);
 }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack2.0配置postcss-loader的方法

    本文介绍使用webpack2.0配置postcssloader,分享给大家.具体如下: 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports =

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 解决webpack dev-server不能匹配post请求的问题

    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以

  • 解决webpack无法通过IP地址访问localhost的问题

    1.问题描述: 今天用 webpack (v1.14.0)配置本地服务,为了能在移动端预览开发效果,需要通过 IP 地址生存二维码然后手机扫描访问.却发现不能通过 ip 访问 localhost. 2.解决方案: 经多方查询,在 npm run dev 时添加参数 --host 0.0.0.0即可. 以上这篇解决webpack无法通过IP地址访问localhost的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 参考地址:https://github.com/

  • 尤雨溪开发vue dev server理解vite原理

    尤雨溪开发vue dev server理解vite原理

    目录 1.引言 2. vue-dev-server 它的原理是什么 3. 准备工作 3.1 克隆项目 3.2 test 文件夹 3.3 vue-dev-server.js 3.4 用 VSCode 调试项目 4. vueMiddleware 源码 4.1 有无 vueMiddleware 中间件对比 4.2 vueMiddleware 中间件概览 4.3 对 .vue 结尾的文件进行处理 4.3.1 bundleSFC 编译单文件组件 4.3.2 readSource 读取文件资源 4.4 对

  • 解决webpack打包速度慢的解决办法汇总

    刚开始用webpack,谈一谈解决webpack打包慢的问题的方法 技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用.其实这是错误的使用方式. 正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍. 技巧2 webpac

  • 解决Webpack 热部署检测不到文件变化的问题

    今天在用Webpack开发的时候,突然发现文件变动后热部署功能不工作了,感觉好像是webpack检测不到文件的修改了.折腾了半天,开始一直以为是自己的代码有问题了,结果一次无意识的重启了一下机器后发现又可以热部署了,感觉像是见鬼了.于是继续观察. 一天后,不幸再次降临,问题又出现了. 调研了一下,原来 Webpack 的热部署功能是使用 inotify 来监视文件变化,其中 fs.inotify.max_user_watches 表示同一用户同时可以添加的watch数目(watch一般是针对目录

  • Springboot解决ajax+自定义headers的跨域请求问题

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 具体可以查看下表: 2.springboot如何解决跨域问题 1.普通跨域请求解决方案: ①请求接口添加注解@CrossOrigin(origins = "http://127.0.0.1:8020", maxAge

  • 在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

    在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li

  • 解决java使用axios.js的post请求后台时无法接收到入参的问题

    使用vue有一段时间了,下面是我在Java环境下使用vue+axios的时候遇到的一个坑,在这分享给大家,如有不正确或者疑惑的地方可以给我留言. 1.在使用异步请求后台时,由于官方不在更新vue-resource,推荐使用axios,因此在使用的时候难免会遇到各种问题.目前遇到最大的问题是在使用axios.post的请求向Java后端传入入参时,后端无法接收到参数.在这里主要处理移动端浏览器兼容的问题. 在这里我提供了两种解决办法: 一.URLSearchParams.append()方法 由于

  • vue解决一个方法同时发送多个请求的问题

    在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求.这是不允许出现的. 但是怎么解决这个问题呢? 一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了.但是我发现这个有一个弊端,那就是: 如果,该事件有许多的验证,比如电话.邮箱格式是否正确呀,必填的是否填了呀等等.一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按

随机推荐