如何利用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中for-in遍历方式示例介绍
Feb 11 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue前后分离调起微信支付
Jul 29 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
example1.php
2006/10/09 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php中序列化与反序列化详解
2017/02/13 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
设计总监岗位职责
2013/12/07 职场文书
改革共识倡议书
2014/08/29 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
毕业证明模板
2015/06/19 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL