快捷導(dǎo)航

如何利用node轉(zhuǎn)發(fā)請求詳解

更新時間：2020年09月17日 09:26:26 作者：小豪看世界

這篇文章主要給大家介紹了關(guān)于利用node轉(zhuǎn)發(fā)請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本篇文章基于 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ā)成功~