如何利用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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue-router传参用法详解
Jan 19 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
前端性能优化建议
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
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
分享PHP守护进程类
2015/12/30 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JS中Location使用详解
2015/05/12 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python测试人员需要掌握的知识
2018/02/08 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python3实现飞机大战
2020/11/29 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
酒店人事专员岗位职责
2013/12/19 职场文书
六年级数学教学反思
2014/02/03 职场文书
党员党性分析材料
2014/02/17 职场文书
绿色城市实施方案
2014/03/19 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python