技术：使用node + express + http-proxy-middleware搭建一个proxy服务器。
特点：两次跨域
利用express搭建服务器：
1、需要安装node ，然后全局安装express 和express-generator
2、express 项目名 ,创建项目
3、cnpm i 创建依赖
4、安装插件 cnpm i http-proxy-middleware
5、配置http-proxy-middleware
在app.js中 var {createProxyMiddleware} = require('http-proxy-middleware')，并配置
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var {createProxyMiddleware} = require('http-proxy-middleware')
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.middleware=[
createProxyMiddleware(['/api'],{
target:'http://30k160778a.zicp.vip',//将要代理的地址
// target:'http://localhost:4000',//将要代理的地址
changeOrigin:true,
// 修改响应头信息，实现跨域并允许带cookie
onProxyRes: function(proxyRes, req, res) {
res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
res.header('Access-Control-Allow-Credentials', 'true');
},
pathRewrite:{
'^/api':''
}
}),
createProxyMiddleware(['/cate'],{
target:'http://localhost:4000',//将要代理的地址
changeOrigin:true,
// 修改响应头信息，实现跨域并允许带cookie
onProxyRes: function(proxyRes, req, res) {
res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
res.header('Access-Control-Allow-Credentials', 'true');
},
pathRewrite:{
'^/cate':''
}
})
];
app.use(app.middleware);
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
配置完以后运行项目npm start
现在通过localhost:3000（搭建项目运行的地址）就可以请求http://30k160778a.zicp.vip和http://localhost:4000的接口数据。
项目外的index.html文件就可以请求数据了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨域测试</title>
</head>
<body>
</body>
<script src="../plugin/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
url:'http://localhost:3000/api/user/login/code',
// url:'http://localhost:3000/index_category',
type:'POST',
data:{},
success:function(res) {
console.log(res)
},
error:function (error) {
console.log(error)
}
})
$.ajax({
url:'http://localhost:3000/cate/index_category',
type:'GET',
data:{},
success:function(res) {
console.log(res)
},
error:function (error) {
console.log(error)
}
})
</script>
</html>
