1. 需求背景
公司網(wǎng)站的本地開發(fā)版之前一直都是部署在本地電腦上Tomcat容器里的日麸，好處就是本地搭建服務(wù)器環(huán)境接口無需做跨域請(qǐng)求處理傲诵，壞處就是后臺(tái)代碼的每次更新都需要拷貝一份至我的電腦覆蓋，并且本地環(huán)境與測(cè)試線環(huán)境數(shù)據(jù)仍然有所差異姨裸，在本地環(huán)境調(diào)試不便前方。
前天在與新入職的Java工程師討論如何分工協(xié)作的時(shí)候聊到了部署Tomcat容器到我本地的壞處，然后仔細(xì)想想我最近不是在學(xué)nodejs嘛，為何不學(xué)以致用在我本地用nodejs部署跨域代理服務(wù)呢？于是花了兩天零碎的時(shí)間研究了如何使用nodejs來實(shí)現(xiàn)靜態(tài)頁面的接口請(qǐng)求代理苹支。
在實(shí)現(xiàn)跨域之前先理清楚我想實(shí)現(xiàn)的什么樣的功能。
2. 跨域的幾種方式
靜態(tài)網(wǎng)站的里的ajax請(qǐng)求是相對(duì)路徑误阻，同一套代碼要在本地開發(fā)環(huán)境债蜜、測(cè)試線環(huán)境、大陸正式線究反、香港正式線部署寻定。所以請(qǐng)求不適合使用絕對(duì)路徑。
前端跨域
前端跨域的方式有兩種
- 通過script標(biāo)簽跨域
- 通過jsonp跨域
兩者的原理都是使用請(qǐng)求靜態(tài)資源文件的方式精耐，用回調(diào)函數(shù)的包裝把json數(shù)據(jù)返回前端狼速。從而騙過瀏覽器的跨域?qū)彶椤Ｊ褂眠@種方法來跨域意味著前端和后端的代碼都要根據(jù)跨域的要求來重構(gòu)一番卦停，并且只能發(fā)送GET請(qǐng)求,這樣的方式肯定是不可行的向胡，因?yàn)橹挥性诒镜亻_發(fā)時(shí)才需要跨域，代碼部署到線上服務(wù)器后就不需要跨域了惊完。
所以開始研究后端方案跨域僵芹。也有兩種。
后端跨域
- CORS跨域資源共享
- 跨域代理服務(wù)
CORS (Cross-Origin Resource Sharing)跨域資源共享小槐，它允許瀏覽器向跨源(協(xié)議 + 域名 + 端口)服務(wù)器拇派，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制凿跳。CORS需要瀏覽器和服務(wù)器同時(shí)支持,實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器件豌。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信控嗜。
- 參考引用：CORS(跨域資源共享)
使用CORS來實(shí)現(xiàn)跨域仍然需要在目標(biāo)服務(wù)器的接口上配置跨域請(qǐng)求參數(shù)苟径，所以實(shí)現(xiàn)起來要前后端配合還是比較麻煩的。而且僅僅是測(cè)試線服務(wù)器需要跨域躬审，正式線服務(wù)器禁止跨域棘街，這樣子修改后，后臺(tái)代碼就會(huì)出現(xiàn)不一致承边。所以此方法也棄用遭殉。
跨域代理服務(wù)，原理是把前端http請(qǐng)求發(fā)送給后臺(tái)的代理博助，讓代理代為轉(zhuǎn)發(fā)請(qǐng)求险污，從而不需要在瀏覽器上進(jìn)行跨域請(qǐng)求。代理獲取到響應(yīng)結(jié)果再轉(zhuǎn)發(fā)到前端。使用它的好處是目標(biāo)服務(wù)器上的接口代碼和前端代碼都不需要做任何更改蛔糯，只需開啟本地跨域代理服務(wù)即可拯腮。
每種跨域方式分析過后，覺得最可行的操作就是使用靜態(tài)資源代理服務(wù)來做前端跨域請(qǐng)求蚁飒。
3. 使用nodejs跨域代理服務(wù)
在nginx和nodejs間選擇了后者动壤，于是開始了在本地搭建http服務(wù)器和尋找合適的代理跨域中間件。
搭建了本地http服務(wù)后淮逻，具體怎么操作實(shí)現(xiàn)代理跨域其實(shí)還是沒多大思路的琼懊，于是呢就開始百度尋找案例來參考，了解了使用nodejs中間件跨域的大概思路爬早。
先是搭建起http服務(wù)器哼丈，對(duì)訪問主機(jī)地址的網(wǎng)絡(luò)請(qǐng)求進(jìn)行判斷，如果是api接口的請(qǐng)求時(shí)則使用中間件的代理服務(wù)進(jìn)行轉(zhuǎn)發(fā)筛严。讓中間件代為向目標(biāo)服務(wù)器發(fā)起請(qǐng)求醉旦，響應(yīng)結(jié)果再轉(zhuǎn)發(fā)至前端。
4. 代碼實(shí)現(xiàn)
文件結(jié)構(gòu)目錄大概如此,ROOT文件夾為網(wǎng)頁文件夾
1.創(chuàng)建項(xiàng)目文件夾并npm初始化文件夾
mkdir demo
cd demo
npm init -y
2.安裝node-http-proxy中間件
npm install http-proxy --save-dev
3.創(chuàng)建啟動(dòng)文件proxy.js
var PORT = 3000;//定義端口號(hào)
var tatgetPATH='http://www.a.com/'//目標(biāo)服務(wù)器地址
var http = require('http'); //引入http模塊
var url=require('url'); //引入url模塊
var fs=require('fs'); //引入文件模塊
var mine=require('./fileFormat').types; //文件格式字典
var path=require('path'); //引入path模塊
var httpProxy = require('http-proxy'); //跨域代理中間件
var proxy = httpProxy.createProxyServer({
target: tatgetPATH, //接口地址
// 下面的設(shè)置用于https
// ssl: {
// key: fs.readFileSync('server_decrypt.key', 'utf8'),
// cert: fs.readFileSync('server.crt', 'utf8')
// },
// secure: false
});
var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
//訪問根目錄時(shí)改為指向首頁文件
if(pathname=='/'){
pathname='index.html'
}
// 指定根目錄
var realPath = path.join("./ROOT", pathname);
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown';
//判斷如果是api接口訪問桨啃，則通過proxy轉(zhuǎn)發(fā)
if(pathname.indexOf("./ROOT") > 0){
// console.log('發(fā)起請(qǐng)求：',pathname)
proxy.web(request, response);
return;
}
fs.exists(realPath, function (exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write("This request URL " + pathname + " was not found on this server.");
response.end();
} else {
fs.readFile(realPath, "binary", function (err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.end(err);
} else {
var contentType = mine[ext] || "text/plain";
response.writeHead(200, {
'Content-Type': contentType
});
response.write(file, "binary");
response.end();
}
});
}
});
});
server.listen(PORT);
//代理服務(wù)執(zhí)行錯(cuò)誤的監(jiān)聽
proxy.on('error', function(err, req, res){
res.writeHead(500, {
'content-type': 'text/plain'
});
console.log(err);
res.end('Something went wrong. And we are reporting a custom error message.');
});
console.log("Server runing at port: " + PORT + "."+tatgetPATH);
引入文件格式字典 fileFormat.js
exports.types = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml",
"woff": "application/x-woff",
"woff2": "application/x-woff2",
"tff": "application/x-font-truetype",
"otf": "application/x-font-opentype",
"eot": "application/vnd.ms-fontobject"
};
代碼寫完后運(yùn)行proxy.js即可通過跨域代理服務(wù)來實(shí)現(xiàn)本地調(diào)用不同域服務(wù)器的接口了车胡。
- 源碼主要參考了下面這篇文章，十分感謝該作者提供的方案优幸。
Node.js配合node-http-proxy解決本地開發(fā)ajax跨域問題
5. 總結(jié)
跨域的解決方案有很多吨拍，具體選擇哪一種方案還是根據(jù)實(shí)際的情況來進(jìn)行分析。
以前還沒學(xué)習(xí)nodejs的時(shí)候网杆，遇到跨域問題能想到的解決方法就是使用ajax的jsonp,需要后端返回的接口加上回調(diào)函數(shù)羹饰，前端再通過通過函數(shù)對(duì)數(shù)據(jù)進(jìn)行接收。改起來十分之麻煩碳却。
前端若是懂得后端的一些知識(shí)队秩，便能夠使用更多的解決方案來解決問題。web開發(fā)中包括了前端和后端昼浦，能夠熟練使用兩端的技能馍资，才能夠在web開發(fā)中游刃有余。
