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

news2025/2/27 22:56:51

今天遇到一个问题:

关于#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}`);
});

后端结构:

 

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

(完)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

钉钉对接打通金蝶云星空获取流程实例(宜搭)接口与付款单新增接口

钉钉对接打通金蝶云星空获取流程实例(宜搭)接口与付款单新增接口 对接系统钉钉 钉钉(DingTalk)是阿里巴巴集团专为中国企业打造的免费沟通和协同的多端平台,提供PC版,Web版和手机版,有考勤打卡、…

如何安全高效地进行4S店文件分发,保护核心资产?

4S店与总部之间的文件分发是确保双方沟通顺畅、信息共享和决策支持的重要环节。4S店文件分发涉及到以下文件类型: 销售报告:4S店需要定期向总部提交销售报告,包括销售数量、销售额、市场份额等关键指标。 库存管理文件:包括车辆库…

HTML满屏漂浮爱心

目录 写在前面 满屏爱心 代码分析 系列推荐 写在最后 写在前面 小编给大家准备了满屏漂浮爱心代码&#xff0c;一起来看看吧~ 满屏爱心 文件heart.svg <svg xmlns"http://www.w3.org/2000/svg" width"473.8px" height"408.6px" view…

SpringBoot设置默认文件大小

1、问题发现 有个需求&#xff0c;上传文件的时候&#xff0c;发现提示了这个错误&#xff0c;看了一下意思是说&#xff0c;文件超过了1M。 看我们文件的大小&#xff1a; 发现确实是&#xff0c;文件超出了1M&#xff0c;查了一下资料&#xff0c;tomcat默认上传文件大小为1M…

什么是工具? 从语言模型视角的综述

24年3月CMU和上海交大的论文“What Are Tools Anyway? A Survey from the Language Model Perspective”。 到底什么是工具&#xff1f; 接下来&#xff0c;工具在哪里以及如何帮助语言模型&#xff1f; 在综述中&#xff0c;对语言模型使用的外部程序工具进行了统一定义&…

天机学堂—项目总览和基建

总览 天机学堂是一个基于微服务架构的生产级在线教育项目。 项目亮点 技术架构 环境搭建 为了模拟真实开发环境&#xff0c;我们准备了一台虚拟机&#xff0c;在其中安装了各种各样的公共服务和组件。 Jenkins 是一个开源的持续集成&#xff08;Continuous Integration&…

【opencv】信用卡号识别实验

实验环境&#xff1a;anaconda、jupyter notebook&#xff08;其它的ide也行&#xff09; 实验用的包&#xff1a;numpy、matplotlib、opencv 实验目标&#xff1a; 识别信用卡的卡号 信用卡图片&#xff1a; 数字模板图片&#xff1a; 一、包引入 import cv2 import matplo…

02-WPF_基础(一)

1、基础 各模块类型 链接&#xff1a;如何&#xff1a;向 Viewbox 的内容应用 Stretch 属性 - WPF .NET Framework | Microsoft Learn WPF基础以及事件绑定与数据绑定的情况&#xff0c;&#xff0c;在学习XAML&#xff0c;数据结构以及一个项目学习平台来练手&#xff0c;网络…

windows10安装WSL2及使用

1、安装 安装步骤见官网&#xff1a;https://learn.microsoft.com/zh-cn/windows/wsl/install-manual 2、调整WSL占用内存和空间 装完WSL后&#xff0c;查看任务管理器时发现vmmem进程占用内存过高。WSL内存默认值是电脑内存的一半&#xff0c;CPU默认值是电脑处理器个数&am…

vue3 中 使用 antd中的select 组件的带搜索框 展开后可对选项进行筛选搜索功能

鼠标进入以后下拉显示&#xff1a; 输入字符串以后&#xff1a; 可以看出对数据进行了筛选。 具体代码&#xff1a; 结构上&#xff1a;<a-selectv-model:value"formState.formFlow"show-searchallowClearplaceholder"输入选择流程":options"op…

生产透明化,交付无烦恼

生产进度总延误 质量把控总失守 计划赶不上变化 沟通不畅易误解 ...... 这些问题可能在一些工厂管理中几乎每天都在上演。 在如今快速变化的市场环境中&#xff0c;企业的生产效率和交付能力成为了衡量其竞争力的关键指标。而要实现高效、准确的生产和交付&#xff0c;透明化的…

无人机的用途

无人机&#xff0c;即无人驾驶飞机&#xff0c;其用途广泛且多样&#xff0c;涉及到多个领域。 在农业领域&#xff0c;无人机通过搭载各种传感器和相机&#xff0c;可以对农田进行空中巡视&#xff0c;收集农田数据&#xff0c;如土壤含水量、气温、湿度等&#xff0c;以及植…

《一》Word文字编辑软件---架构设计分析

1&#xff0c;简单介绍 今天&#xff0c;我们来模拟offic软件中的word文档&#xff0c;运行如图&#xff1a; 运行程序后会出现主界面&#xff0c;顶端的菜单栏包括“文件”“编辑”“格式”“窗口”和“帮助五个主菜单。 菜单栏下面是工具栏&#xff0c;包含了系统常用的功能按…

【2024】最新开源版 酒店预约小程序源码 酒店管理系统源码

源码简介&#xff1a; 随着移动互联网的快速发展&#xff0c;酒店行业也逐渐步入数字化、智能化的新时代。通过引入酒店预约小程序和酒店管理系统&#xff0c;酒店可以实现线上线下无缝对接&#xff0c;提高客户体验和服务质量。 分享一款【2024】最新酒店预约小程序源码、酒…

MyBatis缓存的概念

缓存回顾 什么是缓存&#xff1f; 缓存就是内存中的数据&#xff0c;常常来自对数据库查询结果的保存。使用缓存可以避免频繁与数据库交互&#xff0c;进而提高 响应速度 。 MyBatis 对缓存的支持 MyBatis 也提供了对缓存的支持&#xff0c;分为 一级缓存 和 二级缓存。可以…

ubuntu安装vim

安装vim 命令&#xff1a; apt istall vim

传感数据分析——加速度、速度与位移

传感数据分析——加速度、速度与位移 在许多科学和工程应用中&#xff0c;传感器数据的分析是一项至关重要的任务。特别是在运动、运输、结构监测等领域&#xff0c;传感器能够提供有关物体运动和变形的宝贵信息。本文将介绍如何利用Python进行传感器数据分析&#xff0c;重点…

免费申请HTTPS证书的几种方法

SSL证书&#xff08;Secure Sockets Layer Certificate&#xff09;是数字证书的一种&#xff0c;类似于驾驶证、护照和营业执照的电子副本。它是由受信任的数字证书颁发机构&#xff08;CA&#xff09;在验证服务器身份后颁发的&#xff0c;用于确保网络通信的安全性和加密性。…

前端面试:项目细节|项目重难点|已工作|做分享

面试官提问&#xff1a;分享一个项目中记忆比较深刻的需求&#xff1f;说说你是怎么解决的&#xff1f;解决过程有没有遇到什么困难&#xff1f; 答&#xff1a;我的回答&#xff08;我分点写思路&#xff0c;便于大家观看&#xff09;&#xff1a; &#xff08;1&#xff09…

如何实现数字化校园的高效运维

随着科技开展&#xff0c;国家大力支持各级各类学校建造数字化学校&#xff0c;综合利用互联网、大数据、人工智能和虚拟现实技能探究未来教育教育新模式。因为数字化学校的快速开展&#xff0c;学校网内设备类型很多&#xff0c;网络拓扑杂乱&#xff0c;信息运用繁复。各部门…