使用node轉(zhuǎn)發(fā)請求

作者：小豪看世界

來源：SegmentFault 思否社區(qū)

前言

本篇文章基于?vue、node(koa)

需求

vue 項目開發(fā)過程中，接口跨域是一個很常見的問題。在開發(fā)時候可以用 vue 自帶的 proxy 可以輕松解決。生產(chǎn)環(huán)境下，前端項目往往是部署在后端項目下，不會存在跨域的問題，接口前綴可以忽略。

dev 環(huán)境下，請求一個產(chǎn)品列表接口，我們可能會這么做：

https://www.baidu.com/api/product/list

生產(chǎn)環(huán)境下，前綴可以忽略：

/api/product/list

問題來了，如果我們想在本地測試生產(chǎn)環(huán)境下的前端項目，會存在跨域的問題；發(fā)給后端部署項目又太麻煩，修改代價太大。我們可以自己部署一個簡易的 node 服務(wù)，來部署自己的前端項目~

?實現(xiàn)

?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?搭建簡易服務(wù)端

引入?koa，然后監(jiān)聽端口

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'))));

這樣差不多就完成了，跑服務(wù)然后打開 3000?端口，項目能夠正常訪問：

?2.?轉(zhuǎn)發(fā)接口請求

項目是能正常請求了，可是還需要處理接口問題，即?node?當(dāng)成中間件，轉(zhuǎn)發(fā)前端接口請求到真正的后端接口

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();
});

最后再打開瀏覽器查看，大功告成,接口轉(zhuǎn)發(fā)成功~

?

完整代碼：

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