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())