使用node轉發請求

 前言

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

});

最後再打開瀏覽器查看，大功告成,接口轉發成功~

 完整代碼

完整代碼

---

END