每當(dāng)提起反向代理器，人們通常一想到的就是 Nginx，但是今天我們暫時(shí)忽略大名鼎鼎的 Nginx，采用同樣也是使用單線程、事件循環(huán)的服務(wù)端小弟――Node 來(lái)達(dá)成

跨域問(wèn)題是前端開(kāi)發(fā)很常見(jiàn)的問(wèn)題

解決方案有很多種

1. jsonp返回
2. Access-Control-Allow-Origin:'*' (需要注意的是 對(duì)于post請(qǐng)求會(huì)變成option請(qǐng)求需求后端支持)
3. 前端添加代理
   

前端添加代理

以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ù)器并不能滿足所有的日常開(kāi)發(fā)。

比如說(shuō)單點(diǎn)登錄的實(shí)現(xiàn)，需求服務(wù)端做302跳轉(zhuǎn)。但是前端文件沒(méi)有部署到后端服務(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 ');});

這樣前端開(kāi)發(fā)就可以在8088端口了，當(dāng)然熱加載功能是在前端服務(wù)器的8888端口

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。