• 文章
  • 在线工具

搭建一个proxy服务器。

node.js express http-proxy-middleware 代理跨域 热门
2 1050
技术:使用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的接口数据。


这时前端(http://127.0.0.1:5500/跨域/index.html)访问localhost:3000还会存在跨域,所以才有上面的二次跨域设置。(二次跨域设置,有的还需要更多,依情况而定的添加)


项目外的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>

   


评论
或者使用社交账号快捷登录