您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Node怎么實(shí)現(xiàn)前端本地開發(fā)接口代理服務(wù)”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
我們?cè)谇岸碎_發(fā)的接口聯(lián)調(diào)階段,經(jīng)常會(huì)遇到跨域問題,因?yàn)楸镜赝ǔJ褂?code>localhost域名來啟動(dòng)項(xiàng)目,當(dāng)然我們可以通過配置host解決這個(gè)問題,但當(dāng)需要訪問線上頁面的時(shí)候,又必須關(guān)閉host;我們也可以通過webpack的插件dev-server
來配置代理(Proxy),但有時(shí)需要和多個(gè)服務(wù)端研發(fā)進(jìn)行接口聯(lián)調(diào),因此就需要配置多個(gè)Proxy,設(shè)置多個(gè)虛擬接口前綴,還要考慮發(fā)布后線上如何不走代理,整體來說,配置工作是比較麻煩的。
針對(duì)以上背景,我們需要一個(gè)更加簡(jiǎn)單靈活的接口代理方案,我們的目標(biāo)是:
接入簡(jiǎn)單,只需在前端項(xiàng)目中增加少量代碼;
環(huán)境隔離,只針對(duì)本地開發(fā)環(huán)境使用代理,對(duì)線上無影像,發(fā)布時(shí)也無需修改代碼;
配置靈活:可針對(duì)不同接口進(jìn)行差異化配置,可同時(shí)對(duì)接多個(gè)服務(wù)端研發(fā)進(jìn)行聯(lián)調(diào);
我們?cè)谑褂脀ebpack的插件dev-server
時(shí),本質(zhì)是本地運(yùn)行了一個(gè)代理服務(wù),前端頁面發(fā)送的網(wǎng)絡(luò)請(qǐng)求,實(shí)際都是請(qǐng)求了這個(gè)代理服務(wù),再由代理服務(wù)轉(zhuǎn)發(fā)到實(shí)際的接口URL上,最后代理服務(wù)再將接口返回的數(shù)據(jù)透?jìng)鹘o前端頁面。
根據(jù)這個(gè)原理,我們來自行搭建一個(gè)代理服務(wù),也將它在本地運(yùn)行,來實(shí)現(xiàn)同dev-server
插件一樣的代理過程,但我們會(huì)在本方案中引入更加靈活的一種配置方式,也就是通過修改config.json
配置文件,來實(shí)現(xiàn)更加簡(jiǎn)化的配置,以及隨用隨改的靈活特性。
首先在本地創(chuàng)建一個(gè)NodeJS項(xiàng)目(需要安裝NodeJS環(huán)境,版本建議12+),命名為api-proxy-server
,具體步驟略。
溫馨提示:本文的代理服務(wù)項(xiàng)目源代碼,筆者免費(fèi)提供!只需 點(diǎn)贊+關(guān)注 即可在評(píng)論區(qū)留言索要,留下您的郵箱,筆者會(huì)在看到的第一時(shí)間發(fā)送,項(xiàng)目源代碼README
文件詳細(xì)描述了如何使用,方便您快速接入。
我們的代理服務(wù)使用Express
框架來開發(fā)(需要安裝依賴),也可以根據(jù)個(gè)人習(xí)慣使用其他框架,比如KOA
、Egg.js
等。
首先在項(xiàng)目主文件中導(dǎo)入相關(guān)依賴:
const express = require('express'); const http = require('http'); const bodyParser = require('body-parser'); const app = express();
然后使用bodyParser
對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行解析:
app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json());
接下來這一步很關(guān)鍵,就是要允許跨域,我們要允許所有域名和請(qǐng)求的訪問,具體設(shè)置如下:
app.all('*', (req, res, next) => { res.header('Access-Control-Allow-Origin', req.headers.origin); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTION'); res.header('Access-Control-Allow-Credentials', 'true'); res.header('X-Powered-By', '3.2.1'); next(); });
然后我們給這個(gè)服務(wù)編寫默認(rèn)的路由(也可以理解為接口,對(duì)于前端來說,服務(wù)端提供的路由都可以視為接口),默認(rèn)的路由我們定義為GET
請(qǐng)求,方便我們?cè)跒g覽器直接訪問,來驗(yàn)證服務(wù)是否成功啟動(dòng)。
Express掛載路由的方式如下:
app.get('/', (req, res) => { res.send('Hello, Welcome use api proxy.'); });
最后,我們來編寫啟動(dòng)服務(wù)的代碼,如下:
const port = 8080; http.createServer(app).listen(port); console.log(`http://127.0.0.1:${port} 服務(wù)已啟動(dòng)`);
按照以上步驟編寫完代碼后,啟動(dòng)服務(wù),在瀏覽器中訪問http://127.0.0.1:8080
,如果看到瀏覽器顯示“Hello, Welcome use api proxy.”說起服務(wù)啟動(dòng)成功了。
關(guān)于如何啟動(dòng)服務(wù),筆者的做法是,在package.json
中配置啟動(dòng)腳本dev
,然后運(yùn)行npm run dev
即可,也可以通過pm2
進(jìn)程守衛(wèi)插件(需要安裝依賴)來啟動(dòng)服務(wù),這樣做的好處是可以在程序報(bào)錯(cuò)時(shí),保證服務(wù)不會(huì)停止。
啟動(dòng)腳本配置如下:
"scripts": { "start": "pm2 start ./src/server.js", "stop": "pm2 stop ./src/server.js", "dev": "node ./src/server.js" },
在上述步驟中,我們已經(jīng)可以啟動(dòng)代理服務(wù),并編寫了一個(gè)默認(rèn)的GET
路由(接口),接下來我們來實(shí)現(xiàn)本文的核心內(nèi)容,編寫一個(gè)POST
類型的接口,用于對(duì)前端接口請(qǐng)求進(jìn)行代理。
為了方便后續(xù)的維護(hù)和擴(kuò)展,我們將代理接口的源代碼編寫到一個(gè)獨(dú)立的文件中,目錄為src/routes/api
,文件名為index.js
,然后在主文件中導(dǎo)入并掛載路由即可,代碼如下:
const api = require('./routes/api'); // ...... app.post('/api', api);
注意:代理接口的路由我們定義為/api
,因此在前端項(xiàng)目中調(diào)用這個(gè)服務(wù)的完整路徑就是http://127.0.0.1:8080/api
,這個(gè)接口只能通過axios
來訪問,因?yàn)樗?code>POST類型的,不支持瀏覽器訪問驗(yàn)證。
我們打開src/routes/api/index.js
文件來編寫具體的代碼,首先導(dǎo)出一個(gè)基本的路由函數(shù):
const axios = require("axios"); const qs = require("qs"); const fs = require("fs"); const fspath = require("path"); module.exports = (req, res) => { // ...... }
在這個(gè)函數(shù)內(nèi),我們來處理前端請(qǐng)求,先從請(qǐng)求體中獲取參數(shù):
const { path, params } = req.body;
其中path
指定了要訪問哪個(gè)服務(wù)端接口路徑,params
是要透?jìng)鹘o服務(wù)端的實(shí)際入?yún)ⅰ?/p>
然后我們?cè)?code>src/routes/api/目錄下,創(chuàng)建一個(gè)接口配置文件config.json
,這個(gè)配置文件維護(hù)了默認(rèn)的服務(wù)端接口域名或IP地址,以及默認(rèn)的請(qǐng)求方式和數(shù)據(jù)類型。具體定義如下:
屬性名 | 說明 | 示例 |
---|---|---|
baseUrl | 服務(wù)端接口默認(rèn)地址 | http://192.168.1.17 |
method | 請(qǐng)求方式,默認(rèn)是POST | GET / POST |
contentType | 數(shù)據(jù)類型,默認(rèn)是json | form / json |
繼續(xù)編寫代碼,來讀取這個(gè)config.json
配置文件,代碼如下:
// 讀取接口配置文件 const configPath = fspath.resolve(process.cwd(), './src/routes/api/config.json'); if (!fs.existsSync(configPath)) { res.json({ code: '-1', msg: '接口配置文件不存在!' }); return; } const configStr = fs.readFileSync(configPath, { encoding: 'utf-8' }); let config = null; try { config = JSON.parse(configStr); } catch (error) { res.json({ code: '-1', msg: '接口配置文件格式有誤,解析失?。?#39; }); return; } // 獲取接口默認(rèn)配置 let { baseUrl, method='POST', contentType='json', extra=[] } = config;
代碼寫到這里,我們已經(jīng)拿到了真實(shí)的服務(wù)端接口地址、請(qǐng)求類型以及數(shù)據(jù)類型,然后就可以通過axios
來發(fā)送請(qǐng)求了,但這樣并不支持個(gè)別請(qǐng)求的差異化,比如有的接口需要跟另外的服務(wù)端研發(fā)聯(lián)調(diào),也就是baseUrl
不同、有的接口請(qǐng)求類型是GET
,有的接口請(qǐng)求的數(shù)據(jù)類型是application/x-www-form-urlencoded
,因此我們需要一種機(jī)制來實(shí)現(xiàn)對(duì)差異化接口的配置,我們繼續(xù)改寫config.json
文件,加入extra
數(shù)組,在這個(gè)數(shù)組中,我們放入一組對(duì)象,來定義個(gè)別接口的差異化屬性,具體定義如下:
屬性名 | 說明 | 示例 |
---|---|---|
path | 接口路徑(必填),需要差異化配置的接口 | /user/permision |
baseUrl | 服務(wù)端接口地址(選填) | http://192.168.1.16 |
method | 請(qǐng)求方式(選填) | GET / POST |
contentType | 數(shù)據(jù)類型(選填) | form / json |
有了以上配置,我們就可以遍歷extra
數(shù)組,如果當(dāng)前接口請(qǐng)求的path
在其中,就需要按照差異化的配置發(fā)送請(qǐng)求,具體代碼如下:
// 獲取額外的接口配置 if (extra.length > 0) { const extraCfg = extra.find(item => item.path === path); if (extraCfg) { baseUrl = extraCfg.baseUrl || baseUrl; method = extraCfg.method || method; contentType = extraCfg.contentType || contentType; } }
最后我們使用axios
來發(fā)送請(qǐng)求到實(shí)際的服務(wù)端接口地址,然后將返回的數(shù)據(jù)下發(fā)給前端頁面即可。代碼如下:
const url = baseUrl + path; const headers = {}; if (contentType === 'form') { headers['Content-Type'] = 'application/x-www-form-urlencoded'; } axios({ method, url, headers, timeout: 3000, data: contentType === 'form' ? qs.stringify(params) : params }).then(result => { res.json(result.data); Log.api(url, params, result.data); }).catch(error => { res.json({ code: '-1', msg: '網(wǎng)絡(luò)錯(cuò)誤' }); Log.api(url, params, '網(wǎng)絡(luò)錯(cuò)誤'); });
代碼中的Log
是用來記錄日志的,方便我們追蹤代理服務(wù)的運(yùn)行情況,具體實(shí)現(xiàn)可查看本項(xiàng)目源代碼。
至此我們的代理服務(wù)就開發(fā)完成了,運(yùn)行這個(gè)服務(wù),我們就可以在前端項(xiàng)目中接入并使用它了。**注意:**當(dāng)我們修改了config.json
文件后,保存即可,不需要重啟服務(wù)。如果電腦關(guān)機(jī)重啟了,則需要手動(dòng)啟動(dòng)代理服務(wù)。
在前端項(xiàng)目封裝axios請(qǐng)求的地方,判斷如果是本地開發(fā)環(huán)境,則將URL指向此服務(wù),并對(duì)入?yún)⑦M(jìn)行簡(jiǎn)單包裝即可。由于我們只對(duì)本地環(huán)境做了接口代理,因此發(fā)布項(xiàng)目時(shí)無需任何修改,發(fā)布后的版本仍會(huì)調(diào)用實(shí)際的服務(wù)端接口。
代碼示例:
let baseUrl = 'http://api.xyz.com'; // 線上接口域名 let data = { a: 1 } // 接口入?yún)? let path = '/user/permision'; // 實(shí)際的接口路徑 let url = baseUrl + path; // 請(qǐng)求的完整接口url if (process.env.NODE_ENV === 'development') { url = 'http://127.0.0.1:8080/api'; data = { path, params: data } } // 發(fā)送請(qǐng)求 axios({ url, data })
“Node怎么實(shí)現(xiàn)前端本地開發(fā)接口代理服務(wù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。