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

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

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

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

/api/product/list

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

/api/product/list

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

實現(xiàn)

0.安裝依賴

npmikoa--save-dev

npmikoa-static--save-dev

npmikoa-mount--save-dev

npmihttp-proxy-middleware--save-dev

npmikoa2-connect--save-dev

1.koa搭建簡易服務(wù)端

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

constKoa=require(koa

constKoa=require(koa

constpath=require(path

constapp=newKoa();;

constport=process.env.PORT||3000;

app.listen(port,()={

console.log(`Yourapplicationisrunninghere:http://localhost:${port}`);

開放dist（即打包出來的目錄）

constkoaStatic=require(koa-static

constkoaMount=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

constk2c=require(koa2-connect

app.use(async(ctx,next)={

consturl=ctx.path;

if(url.startsWith(/api)){

ctx.respond=false;

awaitk2c(

createProxyMiddleware({

target:#后端的接口地址,

changeOrigin:true,

secure:false,

)(ctx,next);

return