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的协议或域名不同时需要设置为true
  pathRewrite: { '^/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的协议或域名不同时需要设置为true
  pathRewrite: { '^/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/, '');
  },
  
  // 添加代理请求选项装饰器,用于打印实际请求的URL
  proxyReqOptDecorator: 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}`);
});

后端结构:

 

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

(完)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3使用依赖注入实现跨组件传值

父组件Index.vue: <script setup> import { onMounted, provide, ref } from vue import Child from ./Child.vue import ./index.cssconst count ref(0)provide(count, count)const handleClick () > {count.value }onMounted(() > {}) </script><tem…

NSSCTF | [第五空间 2021]WebFTP

注意看这里的题目标签&#xff0c;目录扫描&#xff0c;.git泄露。那么这道题虽然打开是一个登录的界面&#xff0c;但是并不是我们熟悉的爆破和SQL注入。 但是可以在题目标签上看到目录扫描&#xff0c;我们就用dirsearch扫一扫看看 python dirsearch.py -u http://node4.ann…

51单片机实现俄罗斯方块游戏编程

一、设计要求 &#xff08;1&#xff09;利用51单片机&#xff0c;设计一款俄罗斯方块游戏&#xff0c;完成硬件电路的开发和程序的编写调试&#xff1b; &#xff08;2&#xff09;采用LCD12864液晶作为游戏运行界面&#xff1b; &#xff08;3&#xff09;利用按键输入灵活…

[OpenGL] PCF 柔和阴影

目录 一 为什么要使用PCF技术? 二 算法 三 效果 本章节源码点击此处 一 为什么要使用PCF技术? 在阴影改善这篇文章最后我们发现阴影的边缘锯齿化很严重,对于这种问题主要是因为采样精度的问题对于不同片段有可能从深度纹理中采样到了同一个纹理像素,这就导致形成了明显的…

采用java+B/S开发的全套医院绩效考核系统源码springboot+mybaits 医院绩效考核系统优势

采用java开发的全套医院绩效考核系统源码springbootmybaits 医院绩效考核系统优势 医院绩效管理系统解决方案紧扣新医改形势下医院绩效管理的要求&#xff0c;以“工作量为基础的考核方案”为核心思想&#xff0c;结合患者满意度、服务质量、技术难度、工作效率、医德医风等管…

Weblogic WLS Core Components 反序列化命令执行漏洞(CVE-2018-2628)

1 漏洞概述 CVE-2018-2628 是 Oracle WebLogic Server&#xff08;WLS&#xff09;核心组件中的一个反序列化命令执行漏洞。此漏洞允许未授权的用户通过 T3 协议在远程服务器上执行任意命令&#xff0c;从而可能完全控制受影响的服务器。 2 影响版本 该漏洞影响了以下版本的…

宁夏银川最牛起名大师的老师颜廷利:宝与饱,饿跟恶

对于中国优秀传统文化之根-汉语而言&#xff0c; 恶&#xff0c;对应着‘饿’&#xff1b; 宝&#xff0c;对应着‘饱’… 由此可见&#xff0c;无论是‘饿’&#xff08;与‘恶’同音&#xff09;&#xff0c;还是‘饱’&#xff08;与‘宝’通音&#xff09;&#xff0c;实际…

粒子群算法(Particle Swarm Optimization)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 粒子群优化算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;的灵感来源于鸟群或鱼群的觅食行为。想象一下&a…

python怎么遍历字符串

python怎么遍历字符串&#xff1f;下面给大家介绍四种方法&#xff1a; 1、第一种方式&#xff0c;使用for in遍历字符串。 girl_str "love You" for everyChar in girl_str:print everyChar 2、第二种方式&#xff0c;使用range()或xrange()&#xff0c;把字符串…

iOS MRC那句话

混编时使用MRC文件需要使用这句话 -fno-objc-arc在下图中显示的位置添加

vue:网页icon无法显示

logo文件放在public文件夹下&#xff0c;在html里设置icon。 本地源码运行后发现网页icon无法显示我们设置的logo&#xff0c;而是显示了浏览器默认icon。 这个问题不需要解决&#xff0c;部署后网页icon显示就正常了。

【软考网络工程师】每日练题学知识

1.在EIGRP协议中&#xff0c;某个路由器收到了两条路径到达目标网络&#xff0c;路径1的带宽为100Mbps&#xff0c;延迟2ms&#xff0c;路径2的带宽为50Mbps&#xff0c;迟为4ms&#xff0c;如果EIGRP使用带宽和延迟的综合度量标准&#xff0c;那么该路由器选择的最佳路径是&am…

【MySQL的内外连接】

文章目录 一、内连接二、外连接1.左外连接2.右外连接 一、内连接 基本语法&#xff1a; select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件&#xff1b;&#xff08;这里的and&#xff0c;也可以修改成where&#xff0c;并且建议使用where&#xff0c;逻辑更清晰…

GEE案例分析——利用多时 Sentinel-1/2 和 Landsat-8/9 遥感数据在GEE中使用机器学习方法进行作物类时序分类

摘要 准确绘制作物类型图对于确保粮食安全至关重要。遥感(RS)卫星数据空间覆盖面广,时间频率高,是这一领域前景广阔的工具。然而,由于作物的类内和类间变异性很高,利用 RS 数据进行准确的作物类型分类方法的需求仍在不断增长。为此,本研究提出了一种新颖的并行级联集合…

《Video Mamba Suite》论文笔记(3)Mamba作为时序适配器的作用

原文翻译 4.3 Mamba as Video Temporal Adapter&#xff08;时序自适应建模&#xff09; Tasks and datasets.除了评估 Mamba 在后时间建模中的性能外&#xff0c;我们还评估了它作为视频时间适配器的有效性。通过对自我中心数据[29,49]进行视频-文本对比学习&#xff0c;对双…

免费的集成组件有哪些?

集成组件是指将多个软件或系统进行整合&#xff0c;以实现更高效、更可靠的数据处理和管理。在数据管理和分析领域&#xff0c;集成组件是不可或缺的工具之一。 在当今高度信息化的时代&#xff0c;集成组件在各行各业的应用中扮演着举足轻重的角色。集成组件能够将不同来源的…

翻天娃时光列车于地铁1号线闪耀启程,五一站厅活动再掀品牌热潮

四月下旬&#xff0c;备受瞩目的翻天娃食品品牌地铁广告震撼亮相长沙地铁1号线&#xff0c;翻天娃时光列车闪耀启程。五月中旬&#xff0c;翻天娃又在五一广场地铁站举办了一场别出心裁的站厅活动&#xff0c;将市民乘客们带入了一场穿越时光的奇妙旅程。 作为一家专注于休闲食…

【opencv】图像处理(一)

实验环境&#xff1a;anaconda、jupyter notebook 实验用到的包&#xff1a;numpy,matplotlib,opencv 一、opencv安装 最好使用python3.6&#xff08;我之前用的3.9安装opencv3.4.1.15会失败&#xff09; conda create -n cv python3.6安装opencv3.4.1.15&#xff08;3.4.2版…

美国加州正测试ChatGPT等生成式AI,在4大部门应用

5月11日&#xff0c;美联社消息&#xff0c;美国加州政府正在测试ChatGPT等生成式AI&#xff0c;应用在税收和收费管理部、交通部、公共卫生部以及卫生与公众服务部4大部门。 测试时间6个月&#xff0c;为其提供技术支持的一共有5家公司&#xff0c;分别是OpenAI、Anthropic、…

笨方法自学python(九)-读写文件

读取文件 前面已经学过了 input 和 argv&#xff0c;这些是你开始学习读取文件的必备基础。你可能需要多多实验才能明白它的工作原理&#xff0c;这节练习涉及到写两个文件。一个正常的 ex15.py 文件&#xff0c;另外一个是 ex15_sample.txt&#xff0c;第二个文件并不是脚本&…