如何利用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 相关文章推荐
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
jquery 使用点滴函数代码
May 20 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
原生JS封装vue Tab切换效果
Apr 28 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
php超快高效率统计大文件行数
2015/07/05 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python实现识别手写数字大纲
2018/01/29 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python计算日期之间的放假日期
2018/06/05 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
临床医师个人自我评价
2014/04/06 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
检讨书模板
2015/01/29 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android