如何利用node转发请求详解


Posted in Javascript onSeptember 17, 2020

前言

本篇文章基于 vue、node(koa)

需求

vue 项目开发过程中,接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下,前端项目往往是部署在后端项目下,不会存在跨域的问题,接口前缀可以忽略。

dev 环境下,请求一个产品列表接口,我们可能会这么做:

https://www.baidu.com/api/product/list

生产环境下,前缀可以忽略:

/api/product/list

问题来了,如果我们想在本地测试生产环境下的前端项目,会存在跨域的问题;发给后端部署项目又太麻烦,修改代价太大。我们可以自己部署一个简易的 node 服务,来部署自己的前端项目~

实现

0. 安装依赖

npm i koa --save-dev
npm i koa-static --save-dev
npm i koa-mount --save-dev
npm i http-proxy-middleware --save-dev
npm i koa2-connect --save-dev

1. koa 搭建简易服务端

引入 koa,然后监听端口

const Koa = require('koa');
const Koa = require('koa');
const path = require('path');

const app = new Koa();;
const port = process.env.PORT || 3000;

app.listen(port, () => {
 console.log(` Your application is running here: http://localhost:${port}`);
});

开放 dist(即打包出来的目录)

const koaStatic = require('koa-static');
const koaMount = require('koa-mount');

// 开放目录
app.use(koaMount('/', koaStatic(resolve('../dist'))));

这样差不多就完成了,跑服务然后打开 3000 端口,项目能够正常访问:

如何利用node转发请求详解

2. 转发接口请求

项目是能正常请求了,可是还需要处理接口问题,即 node 当成中间件,转发前端接口请求到真正的后端接口

const { createProxyMiddleware } = require('http-proxy-middleware');
const k2c = require('koa2-connect');

app.use(async (ctx, next) => {
 const url = ctx.path;
 if (url.startsWith('/api')) {
 ctx.respond = false;
 await k2c(
  createProxyMiddleware({
  target: # 后端的接口地址,
  changeOrigin: true,
  secure: false,
  }),
 )(ctx, next);
 }
 return await next();
});

最后再打开浏览器查看,大功告成,接口转发成功~

如何利用node转发请求详解

完整代码

完整代码

总结

到此这篇关于如何利用node转发请求的文章就介绍到这了,更多相关node转发请求内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
前端性能优化建议
Sep 17 #Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 #Javascript
Vue父子组件传值的一些坑
Sep 16 #Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 #Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 #Javascript
You might like
如何设置mysql允许外网访问
2013/06/04 PHP
ThinkPHP分页实例
2014/10/15 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python日期的加减等操作的示例
2017/08/15 Python
python删除某个字符
2018/03/19 Python
python opencv实现运动检测
2018/07/10 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
出国留学自荐信
2013/10/25 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
个人借款协议书范本
2014/11/17 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
swagger如何返回map字段注释
2021/07/03 Java/Android