node跨域使用express+http-proxy-middleware步骤详解
程序员文章站
2022-06-09 16:50:04
...
这次给大家带来node跨域使用express+http-proxy-middleware步骤详解,node跨域使用express+http-proxy-middleware的注意事项有哪些,下面就是实战案例,一起来看一下。
为什么要使用node代理转发?
我们要实现前后端分离,然后前端不在自己的电脑上安装tomcat,这时候,我们通过用node搭建服务器,然后转发我们的请求。例如:自己本地是localhost:3000,我们需要访问http://www.example.com(当然,开发过程中,这个应该是你们后台的tomcat的地址), 来做ajax的数据交互。
npm init
安装模块
npm install express connect-timeout http-proxy-middleware --save-dev
创建js文件
<!--proxy-server.js--> const express = require('express'); const timeout = require('connect-timeout'); const proxy = require('http-proxy-middleware'); const app = express(); // 超时时间 const TIME_OUT = 30 * 1e3; // 设置端口 app.set('port', '80'); // 设置超时 返回超时响应 app.use(timeout(TIME_OUT)); app.use((req, res, next) => { if (!req.timedout) next(); }); proxyOption = { target: 'http://localhost:8080', pathRewrite: { '^/api/' : '/' // 重写请求,api/解析为/ }, changeOrigoin:true }; // 静态资源路径 app.use('/', express.static('src/page')); // 反向代理 app.use('/api/*', proxy(proxyOption)); // 监听端口 app.listen(app.get('port'), () => { console.log(`server running @${app.get('port')}`); });
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
怎么使用webpack3.0配置webpack-dev-server
以上就是node跨域使用express+http-proxy-middleware步骤详解的详细内容,更多请关注其它相关文章!
下一篇: socket和pack的有关问题
推荐阅读
-
详解使用canvas保存网页为pdf文件支持跨域
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
-
java使用webuploader实现跨域上传详解
-
详解在Vue中如何使用axios跨域访问数据
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
-
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
-
第三节:SignalR之PersistentConnection模型详解(步骤、用法、分组、跨域)
-
使用jquery的jsonp如何发起跨域请求及其原理详解
-
vue使用axios跨域请求数据问题详解
-
详解webpack-dev-server使用http-proxy解决跨域问题