node實(shí)現(xiàn)簡(jiǎn)單的反向代理服務(wù)器
每當(dāng)提起反向代理器,人們通常一想到的就是 Nginx,但是今天我們暫時(shí)忽略大名鼎鼎的 Nginx,采用同樣也是使用單線程、事件循環(huán)的服務(wù)端小弟——Node 來達(dá)成
跨域問題是前端開發(fā)很常見的問題
解決方案有很多種
- jsonp返回
- Access-Control-Allow-Origin:'*' (需要注意的是 對(duì)于post請(qǐng)求會(huì)變成option請(qǐng)求需求后端支持)
- 前端添加代理
前端添加代理
以vue-cli為例,前端添加代理
dev: { env: require('./dev.env'), port: 8888, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target: 'http://localhost:3000', changeOrigin: true, } }
其中'/api'為接口的前綴,target為后端服務(wù)地址
前端請(qǐng)求示例
vm.$http.post('/api/reg', JSON.stringify(info)).then(() => { }, () => { });
反向代理
反向代理可以理解為指定一個(gè)服務(wù)地址為內(nèi)部服務(wù)器地址。
為什么需要反向代理
如果只是作為接口請(qǐng)求,其實(shí)前端搭建代理服務(wù)器就可以了,但是代理服務(wù)器并不能滿足所有的日常開發(fā)。
比如說單點(diǎn)登錄的實(shí)現(xiàn),需求服務(wù)端做302跳轉(zhuǎn)。但是前端文件沒有部署到后端服務(wù)器時(shí),set-cookie是不能成功種下cookie登錄信息的。
這就需要在后端服務(wù)器添加反向代理。
示例如下
const http = require('http'); const httpProxy = require('http-proxy'); const proxy = httpProxy.createProxyServer(); const proxyServer = http.createServer((req, res) => { proxy.web(req, res, { target: 'http://localhost:8888', }); }); proxyServer.listen(8088, () => { console.log('proxy server is running '); });
這樣前端開發(fā)就可以在8088端口了,當(dāng)然熱加載功能是在前端服務(wù)器的8888端口
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
nodejs中函數(shù)的調(diào)用實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了nodejs函數(shù)的調(diào)用,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10windows 下安裝nodejs 環(huán)境變量設(shè)置
windows 下安裝nodejs 了,也安裝了npm, 但是有時(shí)候切不能直接用request(‘ws’)這一類的東西.我覺得是確實(shí)環(huán)境變量或其他設(shè)置有問題,能否給個(gè)完整的設(shè)置方案:2017-02-02基于Express實(shí)現(xiàn)遞歸遍歷文件和CRUD操作
在現(xiàn)代的?Web?應(yīng)用開發(fā)中,文件管理是一個(gè)常見而重要的需求,所以本文就來講講如何利用?Express?框架,在遞歸遍歷文件之后實(shí)現(xiàn)強(qiáng)大的?CRUD?操作,構(gòu)建一個(gè)功能完善的文件管理系統(tǒng),感興趣的可以了解一下2023-06-06