使用node转发请求

共 1680字,需浏览 4分钟

 ·

2020-09-16 11:31

作者:小豪看世界

来源:SegmentFault 思否社区




前言


本篇文章基于 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();
});


最后再打开浏览器查看,大功告成,接口转发成功~





 

完整代码:

https://github.com/zhongzihao1996/my-blog/blob/master/22_%E4%BD%BF%E7%94%A8node%E8%BD%AC%E5%8F%91%E8%AF%B7%E6%B1%82/server.js





点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流。

- END -

浏览 42
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报