Vue项目中使用express实现反向代理

反向代理

在前后端分离的开发中,存在一个问题,我的前端代码是在我的电脑上。而后端java代码是在另一位同事上。如果前端请求直接调用后端那位同事提供的接口(用的是他的IP加上他启动服务器的端口),那么会存在跨域问题无法访问。这时候就会想到用反向代理解决问题。

所谓的反向代理,就是在前端和后台服务器的中间以一个代理服务器的形式接受前端传来的请求,并将其请求发送到对应的服务器上。解决跨域问题。

nginx这东西太大了,学习成本也比较大。我们弄个API的接口代理,用node的express就好了。

准备工作

如果你是用vue-cli构建的项目,这些准备工作就不需要了。直接在dev-server.js进行代理配置就好了。

下面的这些包都需要用npm进行安装,如果没有安装需要先安装才可以使用它

a、引入express

  const express = require('express')
  const app = express()

b、引入反向代理插件 http-proxy-middlewar

  const proxyMiddlewar = require('http-proxy-middlewar')

代理配置

ok,这两个就是进行反向代理的准备工作。下面开始进行反向代理配置。

首先,需要知道的是后端服务器的ip和端口号,

  const proxyPath = 'http://168.96.0.1:8080'   // 注意,这里只需要IP和端口号就可以了。这个ip我瞎写的

然后,将这个path配置到代理配置项中

  const proxyOption = {target: proxyPath,changeOrigin: true}

现在用express使用这个代理就好了

app.use('/api', proxyMiddlewar(proxyOption))  // 下面详细说明这一段  
app.listen() //表示监听的端口号也就是本地的端口号。用vue-cli构建的项目不需要写这行代码

这里注意这个'/api' ,这个是我们要进行拦截的请求。什么意思呢?

我们前端用node启动一个服务器,一般是localhost:8080。我们前端可能会有很多种类的请求,比如:
vue-router,就像假设我们有一个/blog的路由,那么 localhost:8080/blog 是跳入/blog这个路由,并显示相应的页面。

像这一类的请求,我们当然是不希望通过反向代理去后台请求数据的。想要通过反向代理去请求后台的一般都是后台的接口。这时候,前后端需要有一个规范,比如前端请求的/api下的都是请求后台的接口,这会很方便前后端联调开发。

那么就像上面那段代码,通过配置一个拦截请求的context(上面是/api),只有为/api开头的才会通过反向代理去后台发起请求。

app.use('/api', proxyMiddlewar(proxyOption))

这段就相当于

 http://localhost:3000/api/..... —>  http://168.90.0.1:8080/api/....

这就完成了向后台发起请求的反向代理

后续还会有其他的请求方面的配置
参考链接: https://github.com/chimurai/http-proxy-middleware

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,665评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,247评论 25 708
  • 上一篇《WEB请求处理一:浏览器请求发起处理》,我们讲述了浏览器端请求发起过程,通过DNS域名解析服务器IP,并建...
    七寸知架构阅读 81,790评论 21 356
  • 文/孙青云 记账是从10年开始的。最早用笔记在本子上。后来改用记账软件。我记账最主要记录支出,然后简单备注下,比如...
    孙青云阅读 1,137评论 4 14
  • 三观不合 感情观不合 无法讲通 干脆就闭嘴吧 学会闭嘴 学会忍耐 当三个人都这么认为的时候 就该考虑一下这个问题可...
    Arc空有少女心阅读 161评论 0 0

友情链接更多精彩内容