express/koa2中使用http-proxy-middleware代理转发后端接口解决跨域问题

由于后端接口没有设置允许跨域,故前端需要自己解决,如果前端项目是node起的服务,可以使用express/koa2框架,配合http-proxy-middleware中间件转发后端接口

express中:

1.先安装依赖

复制代码
npm i http-proxy-middleware -D

2.设置代理,可配置多条

复制代码
var app = express();

// 设置反向代理解决跨域,类似nginx的反向代理,参考https://github.com/chimurai/http-proxy-middleware/tree/2.x?tab=readme-ov-file
var {createProxyMiddleware} = require('http-proxy-middleware');//http-proxy-middleware是使用http-proxy封装的,基于body-parser上封装的,必须放在 json() 之前
app.use(createProxyMiddleware('/rmt', { target: 'http://14.22.13.13:10000/rmt', changeOrigin: true,  }));
app.use(createProxyMiddleware('/vlpr',{target: 'http://127.0.0.1:8080/vlpr', changeOrigin: true}));//请求http://localhost:3000/vlpr相当于请求http://127.0.0.1:8080/vlpr
app.use(createProxyMiddleware('/admin',{
  target: 'http://116.162.165.193:8081/admin',// 目标服务器 host
  changeOrigin: false,// 默认false,是否需要改变原始主机头为目标URL
  // ws: true,// 是否代理websockets
  // pathRewrite: {
  //   '^/api/old-path': '/api/new-path',// 重写请求,比如我们源访问的是/api/old-path,那么请求会被解析为/api/new-path
  //   '^/api/remove/path': '/path'
  // },
  // router: {
  //   'dev.localhost:3000' : 'http://localhost:8000'// 如果请求主机 == 'dev.localhost:3000',重写目标服务器 'dev.localhost:3000' 为 'http://localhost:8000'
  // }
  // logger: console,//打印日志
  // pathFilter: '**',//匹配所有
}));//请求http://localhost:3000/admin相当于请求http://116.162.165.193:8081/admin

app.use(express.json());//注意如果有用到这个,需要放在http-proxy-middleware后面,不然会报错404,笔者已踩坑

//...其他代码...

koa2中:

1.安装依赖:

复制代码
npm i http-proxy-middleware koa2-connect -D

2.设置代理,可配置多条

复制代码
// koa中使用http-proxy-middleware会报错参考https://blog.csdn.net/fxss5201/article/details/122659412
// 设置反向代理解决跨域,类似nginx的反向代理,参考https://www.cnblogs.com/zhaoweikai/p/9969282.html
// 设置反向代理解决跨域,类似nginx的反向代理,参考https://github.com/chimurai/http-proxy-middleware/tree/2.x?tab=readme-ov-file
const k2c = require("koa2-connect");
var {createProxyMiddleware} = require('http-proxy-middleware');//http-proxy-middleware是使用http-proxy封装的,基于body-parser上封装的,必须放在 json() 之前
app.use(async (ctx, next) => {
  if (ctx.url.startsWith("/rmt")) {
    ctx.respond = false;
    await k2c(
      createProxyMiddleware({
        target: "http://14.22.13.13:10000/rmt",
        changeOrigin: true
      })
    )(ctx, next);
  }
  if (ctx.url.startsWith("/vlpr")) {
    ctx.respond = false;
    await k2c(
      createProxyMiddleware({
        target: "http://127.0.0.1:8080/vlpr",
        changeOrigin: true
      })
    )(ctx, next);
  }
  await next();
});

app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
相关推荐
水冗水孚15 天前
express使用node-schedule实现定时任务,比如定时清理文件夹中的文件写入日志功能
javascript·node.js·express
羽沢3115 天前
nodejs中Express框架的基本使用
express
gongzemin17 天前
前端根据文件流渲染 PDF 和 DOCX 文件
前端·vue.js·express
十月ooOO18 天前
Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因
javascript·npm·express
风清云淡_A18 天前
【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接
express
水冗水孚21 天前
面试官:你是前端你了解oss吗?我反手写了一个react+express+minio实现oss文件存储功能
react.js·node.js·express
snpgroupcn22 天前
泰国零售巨头 CJ Express 借助 SAP 内存数据库实现高效数据管理
数据库·express·零售
水冗水孚23 天前
使用nodejs的express框架实现大文件上传的功能,附完整前后端github代码
javascript·node.js·express
程序猿小D24 天前
第29节 Node.js Query Strings
node.js·vim·express
程序猿小D25 天前
第24节 Node.js 连接 MongoDB
数据库·mongodb·npm·node.js·编辑器·vim·express