java 解决跨域时遇到问题,怎么来做一个跨域环境

今天遇到一个问题:

关于#java#的问题:java 解决跨域时遇到问题:为什么跨域访问时配置的CorsFilter没有进入?直接访问请求地址时进入了配置的CorsFilter

由于没有实际的跨域环境,因此打算在本机建一个跨域环境,以便后边测试。

思路:

nodejs启动一个服务器,转发访问的请求到后端javaweb服务器

使用到的就是nodejs的express插件来搭建 。

从网上查找了资料和GPT的帮助,找到2个插件可以实现这个想法。

一个常用的中间件是http-proxy-middleware。下面是使用Express和http-proxy-middleware来转发请求的基本步骤:

首先,确保你已经安装了Express和http-proxy-middleware。如果没有安装,可以通过npm来安装:

npm install express http-proxy-middleware

接下来,在你的Node.js应用中设置转发请求:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// 配置转发规则
const apiProxy = createProxyMiddleware({target: 'http://target-api-server.com', // 目标API服务器地址changeOrigin: true, // 是否改变源到目标URL,默认false,当目标URL与源URL的协议或域名不同时需要设置为truepathRewrite: { '^/api': '' }, // 路径重写,例如将/api前缀替换为空,以便正确路由到目标服务器onProxyRes: function(proxyRes, req, res) {// 可以在这里处理响应,比如修改响应头等},onError: function(err, req, res) {res.status(500).send('Something went wrong while forwarding the request');},
});// 使用中间件进行请求转发
app.use('/api', apiProxy);// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});

在这个例子中,任何以/api开头的请求都会被转发到http://target-api-server.comchangeOrigin设置为true表示将请求源头改为目标服务器,这对于那些校验请求来源的应用来说非常重要。pathRewrite选项可以用来修改请求路径,以匹配目标服务器的API路径结构。

请根据你的具体需求调整上述代码中的目标URL以及其他配置选项。

我本机的实际代码是:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// 配置转发规则
const apiProxy = createProxyMiddleware({target: 'http://localhost:8080/jsp_cros_test', // 目标API服务器地址changeOrigin: true, // 是否改变源到目标URL,默认false,当目标URL与源URL的协议或域名不同时需要设置为truepathRewrite: { '^/api': '' }, // 路径重写,例如将/api前缀替换为空,以便正确路由到目标服务器onProxyRes: function(proxyRes, req, res) {// 可以在这里处理响应,比如修改响应头等},onError: function(err, req, res) {res.status(500).send('Something went wrong while forwarding the request');},
});// 使用中间件进行请求转发
app.use('/api', apiProxy);// 启动服务器 process.env.PORT || 3000
const PORT = 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});

不过我本机的nodejs版本是v12.18.2,因此http-proxy-middleware高版本不合适,需要降级:

npm uninstall http-proxy-middleware
npm install http-proxy-middleware@^1

运行效果: 

第二种是使用express-http-proxy在Node.js中通过Express框架来转发请求是一种常见的做法。以下是使用express-http-proxy来设置请求转发的步骤:

首先,确保你已经安装了Express和express-http-proxy。如果还没有安装,可以通过npm来安装:

npm install express express-http-proxy

 然后,你可以按照以下示例代码设置请求转发:

const express = require('express');
const proxy = require('express-http-proxy');const app = express();// 配置代理中间件
app.use('/api', proxy('http://target.api.example.com', {// 可选配置项proxyReqPathResolver: function(req) {// 自定义路径解析逻辑,可以根据需要调整转发到目标服务器的实际路径return '/custom/path/on/target' + req.url;},userResHeaderDecorator: function(headers, userReq, userRes, proxyRes) {// 处理或添加响应头headers['X-Special-Header'] = 'Special-Value';return headers;},filter: function(req, res) {// 可以根据请求条件决定是否进行代理return true; // 返回true表示所有请求都转发,false则不转发},forwardPath: function(req, res) {// 修改请求路径,适用于需要对原始请求路径进行转换的场景return req.originalUrl.replace('/api', '');},// 更多配置项请参考express-http-proxy的文档
}));const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Proxy server is running on port ${PORT}`);
});

在这个例子中,所有以/api开头的请求会被转发到http://target.api.example.com。你可以通过proxyReqPathResolveruserResHeaderDecoratorfilterforwardPath等配置项来定制转发逻辑,比如修改请求路径、添加响应头、过滤请求或在转发前修改请求路径等。

请根据你的具体需求调整这些配置选项。记得替换http://target.api.example.com为你要实际转发到的目标API地址。

不过我试验之后提示报错:

forwardPath and forwardPathAsync are DEPRECATED and should be replaced with proxyReqPathResolver

 就是不支持的属性,我实际测试后,可以运行的配置如下:

const express = require('express');
const url = require('url');
const proxy = require('express-http-proxy');const app = express();app.use('/api', proxy('http://localhost:8080', {proxyReqPathResolver: function(req) {// 确保去除/api前缀return "/jsp_cros_test"+ req.url.replace(/^\/api/, '');},// 添加代理请求选项装饰器,用于打印实际请求的URLproxyReqOptDecorator: function(proxyReqOpts, srcReq) {console.log('Proxy request will be sent to:', srcReq.url);return proxyReqOpts; // 确保返回修改后的选项对象},filter: function(req, res) {// 可以根据请求条件决定是否进行代理return true; // 返回true表示所有请求都转发,false则不转发},}));const PORT = 3001;
app.listen(PORT, () => {console.log(`Proxy server is running on port ${PORT}`);
});

后端结构:

 

希望本文可以帮助到你,谢谢阅读。 

(完)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/698293.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 实现Mybatis plus 批量删除

数据库实体字段并不映射的情况&#xff0c;直接请求体集合接收。 PostMapping("/removeIdsInfo")public R<Void> removeIdsInfo(RequestBody List<Integer> ids) {return exStudentService.removeIdsInfo(ids);} /**** 学生模块根据集合id 批量删除数据*…

深度解析Nginx:高性能Web服务器的奥秘(下)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《洞察之眼&#xff1a;ELK监控与可视化》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、Nginx概述 二、Nginx核心功能 1、URL重写与重…

Springboot整合 Spring Cloud Gateway

1.Gateway介绍 1.是spring cloud官方推出的响应式的API网关框架&#xff0c;旨在为微服务架构提供一种简单有效的API路由的管理方式&#xff0c;并基于Filter的方式提供网关的基本功能&#xff0c;例如&#xff1a;安全认证&#xff0c;监控&#xff0c;限流等等。 2.功能特征…

为什么很多计算机专业的同学毕业即失业❓

✅大部分计算机专业毕业生在就业时遇到困难&#xff0c;原因往往是多方面的&#xff0c;并非普遍情况&#xff0c;主要包括以下几点&#xff1a; 1.技能不匹配&#xff1a;学校所学知识可能与实际工作需求有一定差距&#xff0c;比如缺乏特定编程语言的深入掌握或实际项目经验。…

基于MetaGPT的LLM Agent学习实战(一)

前言 我最近一直在做基于AI Agent 的个人项目&#xff0c; 因为工作加班较多&#xff0c;设计思考时间不足&#xff0c;这里借着Datawhale的开源学习课程《MetaGPT智能体理论与实战》课程&#xff0c;来完善自己的思路&#xff0c;抛砖引玉&#xff0c;和各位开发者一起学习&am…

MySQL 8.4参考手册

5.1 连接到服务器和断开服务器连接 host 和 user 表示主机名&#xff0c;其中 MySQL服务器正在运行&#xff0c;并且您的MySQL帐户的用户名。 为您的设置替换适当的值。代表您的密码;输入它 当 MySQL 显示提示时。********Enter password: 5.2 输入查询 mysql> SELECT VERSI…

美国分析人工智能技术对网络格局的影响(中)

文章目录 前言三、剑更锋利,盾更坚固四、各国对于储存与披露已发现的漏洞有不同的国家级法规五、人工智能将如何改变网络安全的问题既是一个技术问题,也是一个政策问题前言 美国政府正在探索如何使用人工智能来增强其网络能力,如何使用人工智能来加强网络防御,以及如何最好…

照明灯具十大排名都有哪些?市面上比较流行的十大护眼台灯品牌推荐

照明灯具十大排名都有哪些&#xff1f;护眼台灯排名当中靠前的主要有书客、飞利浦、松下等品牌。照明灯具作为家居与办公环境中不可或缺的元素&#xff0c;其品质与选择直接关系到人们的视觉健康与舒适度。本文将为大家揭示照明灯具的十大排名&#xff0c;让大家了解市场上最受…

[QNX] BSP 网络性能优化:调优io-pkt和ClockPeriod提升网速

0 概要 本文介绍如何在QNX系统上优化网络性能&#xff0c;主要通过调整io-pkt和ClockPeriod参数来实现。通过优化&#xff0c;网络吞吐量可以得到显著提升。 1 优化方法 1.1 调整io-pkt的mclbytes参数: io-pkt是QNX系统中常用的网络协议栈&#xff0c;其mclbytes参数指定了…

HTML的使用(上)

文章目录 前言一、HTML是什么&#xff1f;二、使用内容 &#xff08;1&#xff09;换行标记<br>&#xff08;2&#xff09;加粗标记<b> </b>&#xff08;3&#xff09;段落标记<p> </p>&#xff08;4&#xff09;标题标记<h1>~<h6> …

韵搜坊(全栈)-- 前后端初始化

文章目录 前端初始化后端初始化 前端初始化 使用ant design of vue 组件库 官网快速上手&#xff1a;https://www.antdv.com/docs/vue/getting-started-cn 安装脚手架工具 进入cmd $ npm install -g vue/cli # OR $ yarn global add vue/cli创建一个项目 $ vue create ant…

运维基础(二)- 钉钉的使用

一、钉钉的介绍&#xff08;来自百度百科&#xff09; 免费沟通和协同的多端平台 帮助中国企业通过系统化的解决方案&#xff08;微应用&#xff09;&#xff0c;全方位提升中国企业沟通和协同效率。 钉钉&#xff08;Ding Talk&#xff09; 是阿里巴巴打造的企业级智能移动…