如何利用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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php给图片加文字水印
2015/07/31 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php实例化一个类的具体方法
2019/09/19 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python实现哈希表
2014/02/07 Python
numpy中矩阵合并的实例
2018/06/15 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
初中三好学生自我鉴定
2014/04/07 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
企业标语大全
2014/07/01 职场文书
单位接收函格式
2015/01/30 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers