node+express请求代理:http-proxy-middleware模块

前言

现在很多用node作为代理服务器处理一些接口请求,node管理静态资源,而数据API的请求则转发出去。这样也可以解决跨域的问题。

http-proxy-middleware

官方文档:http-proxy-middleware

安装
# npm安装时可能报错,所以使用cnpm
cnpm install http-proxy-middleware --save-dev
简单使用
var express = require('express')
var proxy = require('http-proxy-middleware')
 
var app = express()
 
app.use('/api', proxy({ target: 'http://www.example.org', changeOrigin: true }))
app.listen(3000)
 
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
  • 注意:请求的接口被转发到新地址,在浏览器network中是看不到的。
实例:

接下来实例会创建一个本地服务 http://localhost:3000来做静态资源渲染,其中对http://localhost:3000/api/*下的请求都转发到http://localhost:8080/*完成。

test-proxy.js :用于localhost:3000服务
var express = require('express');
var proxy = require('http-proxy-middleware');
var app= express();
var options = {
  target: 'http://www.example.org', //转发到的地址
  changeOrigin: true, // needed for virtual hosted sites
  ws: true, // 代理websocket
  pathRewrite: {
    '^/api': '', // rewrite path
  },
  router: {
    // 当请求localhost:3000/api时,会转发到http://localhost:8080,
    'localhost:3000/api': 'http://localhost:8080'
  }
}
var exampleProxy = proxy(options)
app.use('/api', exampleProxy)
app.get('/index.html', function(req,res){
     res.sendFile(__dirname+'/public/index.html');
});
app.listen(3000,function(){
	console.log('服务启动到3000端口')
})
3000端口服务/public/下的index.html
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
 	<script type="text/javascript">
        $(function(){
            var contextPath = 'http://localhost:3000';
             $.ajax({
                    type:'get',
                    data:'click',
                    url:contextPath+'/api/hello',
                    success:function(data){
                        console.log(data);
                    },
                    error:function(data){
                        console.log(data);
                    }
			})
        })
    </script>
</body>
</html>
test-8080.js - 用于8080服务
var express = require('express');
var app = express();
app.use(express.static('public'));
var server = app.listen(8080,function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log('应用实例,访问地址为 http://%s:%s',host,port);
})

app.get('/hello', function(req,res){
    let data = {}
    data["name"] = "lucy";
    data["age"] = "23";
    res.send(data);
});

如上:请求localhost:3000会经历如下过程

  • 浏览器请求localhost:3000
  • 返回index.html。浏览器发出ajax请求http://localhost:3000/api/hello
  • 3000服务接收到http://localhost:3000/api/hello请求,转发到http://localhost:8080/hello
  • 8080服务接收到http://localhost:8080/hello,返回相应的数据

注意:

  • 浏览器的Network中看到的请求头仍然是:Request URL: http://localhost:3000/api/hello。也就是说,代理转发在前台是追踪不到的。
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
可以通过以下步骤来实现在前端开发时同时使用mock接口和服务器接口: 1. 安装http-proxy-middleware和json-server,分别用于代理服务器接口和mock接口。 ``` npm install http-proxy-middleware json-server --save-dev ``` 2. 在package.json中添加scripts,用于启动mock服务和代理服务器接口。 ```json "scripts": { "start": "node server.js", "mock": "json-server --watch db.json", "dev": "concurrently \"npm run mock\" \"npm start\"" } ``` 3. 创建一个server.js文件,用于代理服务器接口。 ```javascript const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); app.use('/api', createProxyMiddleware({ target: 'http://localhost:3000', // 服务器接口地址 changeOrigin: true, })); app.listen(4000, () => { console.log('Proxy server listening on port 4000'); }); ``` 4. 创建一个db.json文件,用于存储mock数据。 ```json { "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ] } ``` 5. 在前端代码中使用http-proxy-middleware代理服务器接口和mock接口。 ```javascript import { createProxyMiddleware } from 'http-proxy-middleware'; const apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:4000' }); const mockProxy = createProxyMiddleware('/api', { target: 'http://localhost:3000' }); // 在开发环境中使用mock接口,生产环境中使用服务器接口 const useMock = process.env.NODE_ENV === 'development'; const proxy = useMock ? mockProxy : apiProxy; const app = express(); app.use(proxy); // 使用代理 app.listen(3001, () => { console.log('App listening on port 3001'); }); ``` 通过以上步骤,就可以在前端开发时同时使用mock接口和服务器接口了。在开发环境中,可以使用mock接口进行快速开发和测试,而在生产环境中,则使用真实的服务器接口。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sophie_U

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值