npm模块之http-proxy-middleware中间件解决跨域使用教程

http-proxy-middleware

用于把请求代理转发到其他服务器的中间件。

如今在前后端分离的模式下遇到跨域的问题就在所难免了。

而我们的开发环境下，不可能跑到服务器上直接开发，或者在本地直接搞一个服务器环境。

如何解决这个问题呢？下面我们采用一种方法，就是将接口代理到本地。因为跨域不是接口的限制，而是浏览器为了保障数据安全做得限制，而服务器之间的请求是不受限制的，于是我们是先请求本地的服务器，然后由本地的服务器再去请求线上的接口。

Install

使用express服务器及http-proxy-middleware代理中间件的示例。

安装express和http-proxy-middleware模块。

$ npm install --save-dev http-proxy-middlewareexpress

server.js

//引入express框架

let express = require('express')

let app = express()

//引入跨域中间件

let proxy = require('http-proxy-middleware');

//这段程序的作用是将我们的前端项目设置成静态资源

app.use(express.static("./vue-project"))

//这里要注意"^/" 是匹配的路由,它会将匹配的路由进行转发，没匹配到的就不会转发。

app.use('/', proxy({

//目标后端服务地址

pathRewrite: {

'^/' : ''

},

changeOrigin: true

}))

app.listen(8081)

console.log('server is running!')

proxy({...}) - 匹配任意路径，所有的请求都会被代理。

proxy('/', {...})-匹配任意路径，所有的请求都会被代理。

proxy('/api', {...})-匹配所有以/api开始的路径。

启动server.js

node server.js

index.html

打开浏览器访问http://localhost:8081/（8081是server.js里面监听的端口）

效果如下：