如何利用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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 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简单浏览目录内容的实现代码
2013/06/07 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
TypeScript入门-接口
2017/03/30 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python实现计算图形面积
2021/02/22 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
物流管理专业求职信
2014/05/29 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript