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

相关文章

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

Python Transformer 库安装配置及使用方法

《PythonTransformer库安装配置及使用方法》HuggingFaceTransformers是自然语言处理(NLP)领域最流行的开源库之一,支持基于Transformer架构的预训练模... 目录python 中的 Transformer 库及使用方法一、库的概述二、安装与配置三、基础使用:Pi

关于pandas的read_csv方法使用解读

《关于pandas的read_csv方法使用解读》:本文主要介绍关于pandas的read_csv方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录pandas的read_csv方法解读read_csv中的参数基本参数通用解析参数空值处理相关参数时间处理相关

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

SpringBoot条件注解核心作用与使用场景详解

《SpringBoot条件注解核心作用与使用场景详解》SpringBoot的条件注解为开发者提供了强大的动态配置能力,理解其原理和适用场景是构建灵活、可扩展应用的关键,本文将系统梳理所有常用的条件注... 目录引言一、条件注解的核心机制二、SpringBoot内置条件注解详解1、@ConditionalOn

Python中使用正则表达式精准匹配IP地址的案例

《Python中使用正则表达式精准匹配IP地址的案例》Python的正则表达式(re模块)是完成这个任务的利器,但你知道怎么写才能准确匹配各种合法的IP地址吗,今天我们就来详细探讨这个问题,感兴趣的朋... 目录为什么需要IP正则表达式?IP地址的基本结构基础正则表达式写法精确匹配0-255的数字验证IP地