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

本文主要是介绍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',// 目标服务器 hostchangeOrigin: 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/adminapp.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())

这篇关于express/koa2中使用http-proxy-middleware代理转发后端接口解决跨域问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/650770

相关文章

Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例

《Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx

Python logging模块使用示例详解

《Pythonlogging模块使用示例详解》Python的logging模块是一个灵活且强大的日志记录工具,广泛应用于应用程序的调试、运行监控和问题排查,下面给大家介绍Pythonlogging模... 目录一、为什么使用 logging 模块?二、核心组件三、日志级别四、基本使用步骤五、快速配置(bas

SpringBoot中HTTP连接池的配置与优化

《SpringBoot中HTTP连接池的配置与优化》这篇文章主要为大家详细介绍了SpringBoot中HTTP连接池的配置与优化的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、HTTP连接池的核心价值二、Spring Boot集成方案方案1:Apache HttpCl

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》:本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》:本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中,变量是用于存储程序中数据