唯雪博客

基于webpack利用http-proxy-middleware实现代理转发请求


唯雪博客


本文是在前文《webpack爬坑记录(二)》的基础上进行的延展,代码也会同步更新到GitHub上

https://github.com/vivizhou0596/webpack-sglpage-app

之前在学习中就间或接触到各种服务代理的设置,不同的情况有不同的方法,今天深入学习了一下http-proxy-middleware这个中间件的使用

详细参考了这几篇博文

npm模块之http-proxy-middleware使用教程(译)——http://blog.csdn.net/xmloveth/article/details/56847456

使用http-proxy-middleware解决前端开发中跨域的问题——http://blog.csdn.net/kuangshp128/article/details/77714128

Webpack devServer中的 proxy 实现跨域——http://blog.csdn.net/huangpb123/article/details/78595078

走了不少弯路,终于理了个思路

前端运行接口localhost:8080

express创建服务器运行端口为localhost:3000

配置的目的是同时启动两个服务,并将前端的请求转发到后台服务器(localhost:3000)

1、中间件配置

//引入代理中间件
const proxy = require('http-proxy-middleware');
//webpack相关配置
devServer: {
        ...此处省略一万字
        proxy: {//请求转发的代理设置
          '/': { // 表示当前项目请求的key,匹配根目录下的所有请求到http://localhost:3000
            target: 'http://localhost:3000', // 代理服务器路径
            pathRewrite: {'^/' : '/'}, // 重写路径
            changeOrigin: true
          }
        }
    }

2、express服务器设置

const express = require('express');//引入express服务器
const app = express();//新建一个服务器
app.get('/data',function(req,res){//请求data接口响应消息
res.json({"name":"xiaoming","age":18})
})
app.listen(3000)//监听3000端口

这里进行了最简易的配置,实现了核心逻辑,可以一次为基础进行扩展


白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论