如何利用node转发请求详解
前言
本篇文章基于vue、node(koa)
需求
vue项目开发过程中,接口跨域是一个很常见的问题。在开发时候可以用vue自带的proxy可以轻松解决。生产环境下,前端项目往往是部署在后端项目下,不会存在跨域的问题,接口前缀可以忽略。
dev环境下,请求一个产品列表接口,我们可能会这么做:
https://www.baidu.com/api/product/list
生产环境下,前缀可以忽略:
/api/product/list
问题来了,如果我们想在本地测试生产环境下的前端项目,会存在跨域的问题;发给后端部署项目又太麻烦,修改代价太大。我们可以自己部署一个简易的node服务,来部署自己的前端项目~
实现
0.安装依赖
npmikoa--save-dev npmikoa-static--save-dev npmikoa-mount--save-dev npmihttp-proxy-middleware--save-dev npmikoa2-connect--save-dev
1.koa搭建简易服务端
引入koa,然后监听端口
constKoa=require('koa'); constKoa=require('koa'); constpath=require('path'); constapp=newKoa();; constport=process.env.PORT||3000; app.listen(port,()=>{ console.log(`Yourapplicationisrunninghere:http://localhost:${port}`); });
开放dist(即打包出来的目录)
constkoaStatic=require('koa-static'); constkoaMount=require('koa-mount'); //开放目录 app.use(koaMount('/',koaStatic(resolve('../dist'))));
这样差不多就完成了,跑服务然后打开3000端口,项目能够正常访问:
2.转发接口请求
项目是能正常请求了,可是还需要处理接口问题,即node当成中间件,转发前端接口请求到真正的后端接口
const{createProxyMiddleware}=require('http-proxy-middleware'); constk2c=require('koa2-connect'); app.use(async(ctx,next)=>{ consturl=ctx.path; if(url.startsWith('/api')){ ctx.respond=false; awaitk2c( createProxyMiddleware({ target:#后端的接口地址, changeOrigin:true, secure:false, }), )(ctx,next); } returnawaitnext(); });
最后再打开浏览器查看,大功告成,接口转发成功~
完整代码
完整代码
总结
到此这篇关于如何利用node转发请求的文章就介绍到这了,更多相关node转发请求内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。