在平時開發環境，總是會存在各種各樣的問題，比如跨域，解決跨域的有很多種方式，今天要講的就是用node寫個代理請求後端介面的服務。從此小夥伴再也不用擔心跨域問題，不用跪求後端小哥，給我開啟cors ...
先貼程式碼（核心app.js）：
const express = require('express');
const router = express.Router();
const app = express();
const bodyParser = require('body-parser');// 解析body欄位模組
const axios = require('axios');
const fs = require('fs');
//如需啟動服務後。自動代開瀏覽器，則取消註釋，相應取消下面自動代開瀏覽器程式碼的註釋
//工具
require('./util/util.js');
app.set('views', './views');
app.set('view engine', 'ejs');
let port = process.env.PORT || 8080;
//axios例項
const ajax = axios.create({
baseURL: '', //設定baseUrl
headers:{
'Cookie':"", //一般請求都會要求攜帶cookie.
'Content-Type': ''
},
transformRequest: [function (data) { //攔截請求時候傳輸資料是陣列情況
// Do whatever you want to transform the data
let ret = ''
for (let i in data) {
if(typeof data[i] == 'object'){
let listData = data[i]
for(let k = 0; k < listData.length; k++ ){
ret += encodeURIComponent(i) + '=' + encodeURIComponent(listData[k]) + '&'
}
}else{
ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
}
}
ret = ret.substring(0,ret.length-1)
return ret
}]
});
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); // 呼叫bodyParser模組以便程式正確解析body傳入值
app.use('/static',express.static('./public')); //靜態檔案
//渲染模板檔案 將目錄public下的html頁面名字，渲染成列表，點選可跳轉對應頁面
router.get('/list', function(req, res) {
fs.readdir('./public', function(err, files) {
if (err) {
throw err;
}
// files是一個陣列
// 每個元素是此目錄下的檔案或資料夾的名稱
files.remove('css');
files.remove('js');
files.remove('image');
if(files){
}
res.render('list', { list: files});複製程式碼 });
});
app.use(router);
//api代理請求#最終要一步
app.use('/', function(req, res){
//允許跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('Cache-Control', 'no-cache, no-store, must-revalidate');
res.header('Pragma', 'no-cache');
res.header('Expires', '0');
var method = req.method.toUpperCase();
var options = {
method: method,
url: req.originalUrl,
data: req.body,
};
ajax(options).then(response => {
res.send(response.data);
}).catch(err => {
console.log(err);
});
if (req.method == 'OPTIONS') { res.send(200); }
})
// var localhost = ''
// try {
// var network = os.networkInterfaces()
// localhost = network[Object.keys(network)[0]][1].address
// } catch (e) {
// localhost = 'localhost';
// }
// var uri = 'http://' + localhost + ':' + port +'/list'
app.listen(port, () => {
// opn(uri);
console.log('listening on port : ' + port);
})
專案基礎架構：
public //靜態資源
util //工具函式
views--
|list.ejs //生成一個渲染public裡面html對應的檔案列表，點選可以進入相應的頁面，無需手動在瀏覽器裡輸入
app.js //代理程式碼的核心處理邏輯
package.json //配置
node_modules //包
執行：
npm install 或cnpm i;
node app.js 或新增程式管理工具，nodemon app.js supervisor app.js 都ok.
需注意：
根據專案環境配置axios例項裡的headers,我司專案一般請求介面都需攜帶cookie,cookie可以先用fiddler抓包。如不需要，可刪除。
專案倉庫地址：
github.com/honeydlp/no… 下載後直接將靜態檔案丟進public即可。開發時即可使用，很方便。
結束