反向代理
在前后端分离的开发中，存在一个问题，我的前端代码是在我的电脑上。而后端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
网友评论