快捷導(dǎo)航

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

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

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

前言

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

需求

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

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

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

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

/api/product/list

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

實(shí)現(xiàn)

0. 安裝依賴(lài)

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

引入 koa，然后監(jiān)聽(tīng)端口

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

開(kāi)放 dist（即打包出來(lái)的目錄）

const koaStatic = require('koa-static');
const koaMount = require('koa-mount');

// 開(kāi)放目錄
app.use(koaMount('/', koaStatic(resolve('../dist'))));

這樣差不多就完成了，跑服務(wù)然后打開(kāi) 3000 端口，項(xiàng)目能夠正常訪問(wèn)：

2. 轉(zhuǎn)發(fā)接口請(qǐng)求

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

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

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