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里面监听的端口)

效果如下:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181128G0WJVQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券