如何利用node转发请求详解

 更新时间:2020年09月17日 09:26:26   作者:小豪看世界  
这篇文章主要给大家介绍了关于利用node转发请求的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

本篇文章基于 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 端口,项目能够正常访问:

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转发请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • yarn的安装和使用全网最详细教程

    yarn的安装和使用全网最详细教程

    Yarn是facebook发布的一款取代npm的包管理工具,本文给大家介绍yarn的安装和使用全网最详细教程,感兴趣的朋友一起看看吧
    2023-12-12
  • 浅谈Express异步进化史

    浅谈Express异步进化史

    本篇文章主要介绍了浅谈Express异步进化史 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Node.js模块Modules的使用实战教程

    Node.js模块Modules的使用实战教程

    这篇文章主要介绍了Node.js模块Modules的使用,模块就是一个声明了装饰器@Module()的类。装饰器@Module()提供了元数据,以便让Nest组织应用程序结构
    2023-04-04
  • node中实现删除目录的几种方法

    node中实现删除目录的几种方法

    这篇文章主要介绍了node中实现删除目录的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • node.js中使用node-schedule实现定时任务实例

    node.js中使用node-schedule实现定时任务实例

    这篇文章主要介绍了node.js中使用node-schedule实现定时任务实例,包括安装方法和4种使用例子,需要的朋友可以参考下
    2014-06-06
  • node.js文件上传处理示例

    node.js文件上传处理示例

    这篇文章主要介绍了node.js文件上传处理的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下。
    2016-10-10
  • 使用Nodejs 实现一个简单的 Redis客户端(推荐)

    使用Nodejs 实现一个简单的 Redis客户端(推荐)

    在nodejs中支持TCP连接的是net模块, 其中使用createConnection(config)或者直接new Socket(config)来初始化一个TCP连接,这篇文章主要介绍了用Nodejs 实现一个简单的 Redis客户端,需要的朋友可以参考下
    2022-11-11
  • node.js中的fs.rmdir方法使用说明

    node.js中的fs.rmdir方法使用说明

    这篇文章主要介绍了node.js中的fs.rmdir方法使用说明,本文介绍了fs.rmdir方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • nodejs版本过高导致vue2版本的项目无法正常启动的解决方案

    nodejs版本过高导致vue2版本的项目无法正常启动的解决方案

    这篇文章主要给大家介绍了关于nodejs版本过高导致vue2版本的项目无法正常启动的解决方案,本文小编给大家详细介绍了如何解决这个问题,如有遇到同样问题的朋友可以参考下
    2023-11-11
  • 浅探express路由和中间件的实现

    浅探express路由和中间件的实现

    这篇文章主要介绍了浅探express路由和中间件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论