在平时开发环境,总是会存在各种各样的问题,比如跨域,解决跨域的有很多种方式,今天要讲的就是用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即可。开发时即可使用,很方便。
结束