当前位置: 首页 > news >正文

跨域问题确认及处理

       背景如下

       近期在做的项目中,有个奇怪的需求,需要在JSP项目中嵌套一个VUE项目,原因是:JSP项目是在运且不大方便重构的一个项目,新需求又想为了未来着想做一套单独的项目,无奈只能嵌套。

        当项目开发差不多,需要部署时候,就忽然遇到了今天要聊的跨域问题。

        项目部署时候,JSP项目和VUE项目分别分配了一个端口,当JSP项目跳转到VUE时候,登录失败了(为何是登录失败,等我换一篇细聊权限验证相关内容时候说说)。

        关于此时的失败,一直没有头绪,看到返回值是200,但是F12看网络请求就是红色的一条。直到看到请求status竟然是CORS error(出问题一定要仔细看每一处提示),才定位大概方向是跨域问题。

        知道范围是跨域问题导致的,但是问题来了:

  1. 什么是跨域?
  2. 跨域是怎么产生的?
  3. 一般都是如何解决的?
  4. 记得项目中经常配置跨域相关内容,但是应该配置在哪,给谁配置?

        一个个聊。。。

首先什么是跨域?

        当浏览器向服务器发起请求时,以下三个要素中任意一个不匹配,则会被视为跨域请求

  1. 协议不同(如:http和https)

  2. 域名不同(如:test.com和api.test.com)

  3. 端口不同(如:8080和3000)

        对上面三个要素的判断是由浏览器做的,目的是为了安全,防止出现网页中嵌套其他网站,被其他网站随意调用后出现安全问题。

跨域是怎么产生的?

        我的理解:就是在一个网站里,一般只允许同一个协议、IP(域名)、端口的请求,比如:

http://192.168.0.1:8080/index
http://192.168.0.1:8080/getList
http://192.168.0.1:8080/test/info/test0001

        这些请求都没问题,但是如果冒出来一个

http://192.168.0.1:8081/info/add

        这时候浏览器就会认为有点问题,不能执行!感觉有点类似人体的排他反应一样。。。

跨域怎么解决呢?

        1.常见处理方法之一:接受请求的项目,配置相关CORS的参数,允许某些协议、域名、端口的请求

        2.常见处理方法之二:代理服务器,使用Nginx区分,不同项目,公共同一个端口,请求路径中特殊前缀来区分不同服务

        3.(我没用过的)处理方式三:JSONP(限GET请求)

                利用<script>标签不受同源策略限制的特性,后端返回一个函数包裹的数据

        4.(我还没用过,用过websocket但是没因为处理跨域用)处理方式四:用websocket

应该配置在哪,给谁配置?

        如果我们自己信任两个网站,都知道是做什么的,甚至就是自己的不同项目,如上面的例子,8080调用8081,那我们就得配置到8081上。

        配置到接受的一方。


        前面一顿回顾复习,到我们遇到的问题这里呢?

        在F12中,除了network显示的CORS Error,还有console中报错如下:

Access to XMLHttpRequest at 'http://192.168.10.10:3000/api/auth/login?tm=123123123123&username=test&password=1111' from origin 'http://192.168.10.10:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://192.168.10.10:8080, *', but only one is allowed.

        描述一下问题:从8080端口来的请求已被CORS策略终止了,请求头参数'Access-Control-Allow-Origin'中配置了多个值,但是只能有一个。

        问题更具体了,我们这个服务相关关系是:

  1. 所有请求经过Nginx
  2. 到微服务的网关
  3. 到各项目

        看了看配置,两处都配置了跨域相关内容。。。

Nginx:

http {include mime.types;default_type application/octet-stream;add_header 'Access-Control-Allow-Origin' '*';add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;...
}

gateway:

spring:cloud:gateway:globalcors:corsConfigurations:'[/**]':allowedOriginPatterns: "*"allowed-methods: "*"allowed-headers: "*"allow-credentials: trueexposedHeaders: "Content-Disposition,Content-Type,Cache-Control"

        最终定位问题是:配置重复了

        不过,最终的处理方式是使用代理服务器,两个项目规划到同一个端口下,一个用根目录(/),另一个用一个特殊前缀(/ABC)

相关文章:

跨域问题确认及处理

背景如下&#xff1a; 近期在做的项目中&#xff0c;有个奇怪的需求&#xff0c;需要在JSP项目中嵌套一个VUE项目&#xff0c;原因是&#xff1a;JSP项目是在运且不大方便重构的一个项目&#xff0c;新需求又想为了未来着想做一套单独的项目&#xff0c;无奈只能嵌套。 当项目开…...

PyCharm如何添加已有的conda环境

1、点击文件中的设置 2、在右侧选中项目下的Python解释器 3、在右侧解释器一栏找到添加解释器选项 4、选择本地解释器 5、填写信息 环境&#xff1a;选择现有 类型&#xff1a;conda conda路径&#xff1a;...\Anaconda\Scripts\conda.exe 环境&#xff08;python路径&…...

揭开最大子段和问题的神秘面纱:从暴力法到极致优化的算法之旅

最大子段和问题&#xff1a;从暴力法到优化的算法解析 题目链接 题目描述 给出一个长度为 nn 的序列 aa&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n。第二行有 n 个整数&#xff0c;第 i 个整数表示序列的…...

MySQL原理:逻辑架构

目的&#xff1a;了解 SQL执行流程 以及 MySQL 内部架构&#xff0c;每个零件具体负责做什么 理解整体架构分别有什么模块每个模块具体做什么 目录 1 服务器处理客户端请求 1.1 MySQL 服务器端逻辑架构说明 2 Connectors 3 第一层&#xff1a;连接层 3.1 数据库连接池(Conn…...

提升模型性能:数据增强与调优实战

‌一、为什么需要数据增强&#xff1f; 数据增强通过对训练图像进行‌随机变换‌&#xff0c;能够有效&#xff1a; 增加数据多样性&#xff0c;防止过拟合提升模型对不同视角、光照条件的鲁棒性在数据量不足时显著提升模型性能 二、MNIST手写数字识别实战‌ ‌1. 加载数据…...

Emacs 折腾日记(十八)——改变Emacs的样貌

截止到上一篇文章为止&#xff0c;之前教程 的内容都看完了&#xff0c;虽然它的后记部分提供了一些后续进阶的内容需要我们自己读手册。但是我不太想继续在elisp上死磕了。看着自己学了那么久的elisp&#xff0c;但是自己的emacs仍然没有半点改变&#xff0c;这个时候各位读者…...

VNA操作使用学习-14 再测晶振特性

再测一下4Mhz晶振&#xff0c;看看特性曲线&#xff0c;熟悉一下vna使用。 s11模式&#xff0c;找遍了各种format都无法显示&#xff0c;只有这一种&#xff08;s11&#xff0c;Resistance&#xff09;稍微显示出一个谐振&#xff0c;但是只有一个点。 s21模式 这是201p&#…...

CentOS7 离线下载安装 GitLab CE

依赖下载 https://vault.centos.org/7.9.2009/os/x86_64/Packages/policycoreutils-python-2.5-34.el7.x86_64.rpm 依赖安装 rpm -ivh policycoreutils-python-2.5-34.el7.x86_64.rpm 查看是否安装依赖 rpm -qa | grep policycoreutils-pythongitlab下载 https://packag…...

LeetCode 热题 100_跳跃游戏 II(79_45_中等_C++)(贪心算法)

LeetCode 热题 100_跳跃游戏 II&#xff08;79_45&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;贪心选择&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08;贪心算法&#xff09;…...

《Linux系统编程篇》Linux Socket 网络编程01 API介绍(Linux 进程间通信(IPC))——基础篇

文章目录 引言1. **创建Socket**2. **绑定Socket**3. **监听Socket**4. **接受客户端连接**5. **连接服务器**6. **发送数据**7. **接收数据**8. **发送数据&#xff08;UDP&#xff09;**9. **接收数据&#xff08;UDP&#xff09;**10. **关闭Socket**11. **设置/获取Socket选…...

系统思考—啤酒游戏经营决策沙盘模拟

再次感谢文华学院的邀请&#xff0c;为经纬集团管理层带来 《啤酒游戏经营决策沙盘》&#xff01; 很多朋友问&#xff1a;“最近是不是啤酒游戏上的少了&#xff1f;” 其实&#xff0c;真正的关键不是游戏本身&#xff0c;而是——如何让大家真正看见复杂系统中的隐性结构。 …...

利用设计模式构建事件处理系统

在现代软件开发中&#xff0c;设计模式提供了一种可重用的解决方案来解决常见的设计问题。在这篇博客中&#xff0c;我们将探讨如何利用模板方法模式、责任链模式、建造者模式以及线程安全设计来构建一个灵活且可扩展的事件处理系统。 设计模式及其应用 1. 模板方法模式 应用…...

ThreadLocal 的详细使用指南

一、ThreadLocal 核心原理 ThreadLocal 是 Java 提供的线程绑定机制&#xff0c;为每个线程维护变量的独立副本。其内部通过 ThreadLocalMap 实现&#xff0c;每个线程的 Thread 对象都有一个独立的 ThreadLocalMap&#xff0c;存储以 ThreadLocal 对象为键、线程局部变量为值…...

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代&#xff0c;前端能做些什么&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc #mermaid-svg-VNyL95jkz9jEXgUq {font-family:&…...

阿里云 AI 搜索产品荣获 Elastic Innovation Award 2024

阿里云AI搜索产品荣获Elastic Innovation Award 2024&#xff0c;该奖项于近日在新加坡ElasticON 2025的Elastic合作伙伴峰会上颁发&#xff0c;旨在表彰基于Elastic平台开发企业级生成式人工智能&#xff08;GenAI&#xff09;应用的顶尖合作伙伴&#xff0c;这些应用有效帮助…...

html5制作2048游戏开发心得与技术分享

2048游戏开发心得与技术分享 这里写目录标题 2048游戏开发心得与技术分享项目概述技术架构1. 核心技术栈2. 项目结构 核心功能实现1. 数据结构设计2. 移动逻辑实现3. 触摸支持 性能优化1. DOM操作优化2. 事件处理优化 开发心得1. 代码组织2. 调试技巧3. 用户体验优化 项目亮点技…...

AI日报 - 2025年3月21日

&#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; AGI突破 | OpenAI成立安全委员会&#xff0c;加速AGI治理框架构建 ▎&#x1f4bc; 商业动向 | 微软发布医疗大模型DAX Copilot 3.0&#xff0c;覆盖全球临床场景 ▎&#x1f4dc; 政策追踪 | 中国发布…...

MyBatis-Plus:告别手写 SQL 的高效之道

目录 1. MyBatis-plus 简介 2. MyBatis-Plus 快速上手 2.1 项目准备 2.2 导入 MyBatis-Plus 依赖 2.3 配置数据库连接 2.4 配置 MyBatis-Plus 日志打印 3. 使用 MyBatis-Plus 3.1 创建 model 类 3.2 创建 mapper 接口 3.3 MyBatis-Plus 映射机制 3.3.1 TableName &a…...

【AI News | 20250320】每日AI进展

AI Repos 1、servers 该仓库提供详细入门指南&#xff0c;用户可通过简单步骤连接Claude客户端&#xff0c;快速使用所有服务器功能。此项目由Anthropic管理&#xff0c;展示MCP的多样性与扩展性&#xff0c;助力开发者为大语言模型提供安全、可控的工具与数据访问。 2、awe…...

让“树和二叉树”埋在记忆土壤中--性质和概念

Nice to meet your! 目录 树的介绍&#xff1a; 树的创建&#xff1a; 二叉树的概念和结构&#xff1a; 二叉树的存储结构&#xff1a; 树的介绍&#xff1a; 概念和结构&#xff1a; 不知你们是否在现实中看见过分为两个叉的枯树&#xff0c;大概长这样&#xff1a; 那…...

210、【图论】课程表(Python)

题目 思路 这道题本质上是一个拓扑排序。每次先统计每个点的入度个数、然后再统计点与点之间的邻接关系&#xff0c;找到入度为0的点作为起始遍历点。之后每遍历到这个点之后&#xff0c;就把这个点后续的邻接关系边的点入度减去一。当某个点入度为0时&#xff0c;继续被加入其…...

【Linux篇】进程控制

&#x1f4cc; 个人主页&#xff1a; 孙同学_ &#x1f527; 文章专栏&#xff1a;Liunx &#x1f4a1; 关注我&#xff0c;分享经验&#xff0c;助你少走弯路&#xff01; 1. 进程创建 1.1 fork函数 在linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个…...

freeswitch(在呼叫失败的情况下如何播放语⾳提⽰)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch⼀般我们在打电话时会听到『您拨的电话正在通话中,请稍后再 拨.』,或『电话⽆应答』之类的提⽰,我们在 FreeSWITCH ⾥也可以这样做。 …...

软考系统架构设计师之计算机组成与体系结构笔记

一、计算机硬件组成 1. 冯诺依曼结构与哈佛结构 冯诺依曼结构&#xff1a;以存储器为中心&#xff0c;指令和数据统一存储&#xff0c;通过总线连接运算器、控制器、输入输出设备。其核心思想是“存储程序控制”&#xff0c;但存在存储器访问瓶颈问题。哈佛结构&#xff1a;指…...

gonet开源游戏服务器环境配置

1.mysql搭建 搜索mysql-server apt安装包名 sudo apt search mysql-server 安装mysql-server sudo apt-get install mysql-server 安装完成后会&#xff0c;启动mysql服务及创建系统服务 查看服务状态 systemctl status mysql.service 使用超级权限登陆mysql sudo mysql 授…...

软件工程之软件验证计划Software Verification Plan

个人主页&#xff1a;云纳星辰怀自在 座右铭&#xff1a;“所谓坚持&#xff0c;就是觉得还有希望&#xff01;” 本文为基于ISO26262软件验证计划模板&#xff0c;仅供参考。 软件验证计划&#xff0c;包括&#xff1a; 1. 软件需求验证计划 2. 软件架构设计验证计划 3. 软件单…...

大模型详细配置

Transformer结构 目前主力大模型都是基于Transformer的&#xff0c;以下是Transformer的具体架构 它由编码器(Encoder)以及解码器(Decoder)组成&#xff0c;前者主要负责对输入数据进行理解&#xff0c;将每个输入 词元都编码成一个上下文语义相关的表示向量&#xff1b;后者…...

Web爬虫利器FireCrawl:全方位助力AI训练与高效数据抓取

Web爬虫利器FireCrawl&#xff1a;全方位助力AI训练与高效数据抓取 一、FireCrawl 项目简介二、主要功能三、FireCrawl应用场景1. 大语言模型训练2. 检索增强生成&#xff08;RAG&#xff09;&#xff1a;3. 数据驱动的开发项目4. SEO 与内容优化5. 在线服务与工具集成 四、安装…...

产业观察:ASML2025.3.21

一.发展历程 1.1 创业背景 在半导体行业的快速发展背景下&#xff0c;ASML的创业故事拉开了帷幕。1983年&#xff0c; 飞利浦S&I技术总监Georg de Kruyff 与 ASM创始人Arthur del Prado 重启合作讨论&#xff0c;为ASML的创立奠定了基础。双方迅速达成协议&#xff0c;计…...

go语言学习教程推荐,零基础到做项目

一、基础入门阶段 官方教程&#xff08;免费&#xff09; • A Tour of Go&#xff1a;交互式入门教程&#xff0c;边学边练 • Go by Example&#xff1a;通过300代码片段学习语法 入门书籍 • &#x1f4d8;《Go语言圣经》中文版&#xff08;免费在线阅读&#xff09;&#…...

设计模式 二、创建型设计模式

GoF是 “Gang of Four”&#xff08;四人帮&#xff09;的简称&#xff0c;它们是指4位著名的计算机科学家&#xff1a;Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides。他们合作编写了一本非常著名的关于设计模式的书籍《Design Patterns: Elements of Reusable…...

51c大模型~合集73

我自己的原文哦~ https://blog.51cto.com/whaosoft/12318419 #Emu3 视频、图像、文本&#xff0c;只需基于下一个Token预测&#xff1a;智源Emu3发布&#xff0c;验证多模态模型新范式 OpenAI 前首席科学家、联合创始人 Ilya Sutskever 曾在多个场合表达观点&#xff1…...

【el-upload】el-upload组件 - list-type=“picture“ 时,文件预览展示优化

目录 问题图el-upload预览组件 PicturePreview效果展示 问题图 el-upload <el-uploadref"upload"multipledragaction"#":auto-upload"false":file-list"fileList"name"files":accept".png,.jpg,.jpeg,.JGP,.JPEG,.…...

STM32F103系列配置中断向量表偏移(Keil/STM32CubeIDE)

需要在flash中添加bootloader的话&#xff0c;需要对flash进行分区&#xff0c;即bootloader区和app区(程序运行区)&#xff0c;主要记录在 Keil 平台和 STM32CubeIDE平台 上的中断向量表偏移配置&#xff0c;以偏移 0x2800 为例&#xff0c;即预留10k大小的空间给bootloader …...

Redis常用数据类型和使用常见以及基本操作举例(适合初学者,以医药连锁管理系统为背景)

Redis的常见数据类型&#xff0c;包括String、Hash、List、Set、Zset等&#xff0c;这些数据类型都有各自的特点和适用场景。接下来&#xff0c;将这些数据类型与医药连锁管理系统的业务场景进行匹配。 String类型&#xff0c;适合存储单个值。在医药连锁管理系统中&#xff0…...

ASL扩展坞方案|Type-c转换器方案|ASL原厂代理商

安格瑞科技代理的ASL主板组件系列包括CS5211、CS5311、CS5232、CS5263、CS621x、CS5523、CS5518等产品&#xff1b; CS5228ANDP to HDMI(4K60HZ)CS5262ANDP (4lanes) to HDMI2.0 4k60Hz VGACS5263ANDP(4lanes) to HDMI2.0 4k60HzCS5363ANDP (4lanes) to HDMI2.0 4k60Hz CS521…...

论文略读(2025.3.18-更新中)

关于可控视频生成 I2V3D: Controllable image-to-video generation with 3D guidance Image to Video工作&#xff0c;能够实现给一张图&#xff0c;输出一个视频&#xff0c;且可以控制相机。动态信息来自于用户手工设计&#xff08;相机移动&#xff0c;人体骨骼驱动&#x…...

基于SpringBoot的“校园招聘网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“校园招聘网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 局部E-R图 系统首页界面 系统注册…...

【Linux进程七】程序地址空间

【Linux进程七】程序地址空间 1.进程的地址空间分布2.类型的本质是偏移量3.什么是进程地址空间4.页表的映射和访问权限字段5.地址空间的作用 1.进程的地址空间分布 堆是向上扩展的&#xff0c;栈是向下扩展的 因为字符常量区和代码区相邻&#xff0c;受到同样的保护&#xff0c…...

Linux C/C++编程——线程

线程是允许应用程序并发执行多个任务的一种机制&#xff0c;线程参与系统调度。 系统调度的最小单元是线程、而并非进程。 线程包含在进程之中&#xff0c;是进程中的实际运行单位。一个线程指的是进程中一个单一顺序的控制流&#xff08;或者说是执行路线、执行流&#xff09;…...

【Spring Boot 中 `@Value` 注解的使用】

文章目录 一、前言二、Value 注解简介三、Value 注解的常见用法1. 读取 application.properties 或 application.yml 配置值&#xff08;1&#xff09;配置文件示例&#xff08;2&#xff09;Java 代码示例&#xff08;3&#xff09;测试输出 2. 使用 Value 设置默认值3. 读取系…...

【CAD二次开发】调试无法进入断点提示无可用源问题(非空心断点)

问题截图&#xff1a;显示无可用源&#xff0c;关闭后F5走完后&#xff0c;启动的调试就中断了 操作是&#xff1a;打开Cad&#xff0c;打开dwg后&#xff0c;执行命令&#xff0c;就出现以上截图问题。 问题来源&#xff1a;通常是由于 AutoCAD 的 纤程模式&#xff08;Fiber&…...

Ubuntu下Docker部署Misskey:打造你的去中心化社交平台

引言 在信息爆炸的时代&#xff0c;人们对于社交平台的需求日益增长&#xff0c;同时也更加注重数据的隐私和自由。Misskey作为一个开源的去中心化社交平台&#xff0c;为用户提供了一个全新的选择。本文将详细介绍如何在Ubuntu Linux环境下&#xff0c;利用Docker快速部署Mis…...

【Vue3】01-vue3的基础 + ref reactive

首先确保已经有了ES6的基础 本文介绍 vue 的基础使用以及 两种响应数据的方式。 目录 1. 创建一个vue应用程序 2. Vue模块化开发 3. ref 和 reactive 的区别 1. 创建一个vue应用程序 所需的两个文件&#xff1a; https://unpkg.com/vue3/dist/vue.global.js https://un…...

C++实现rabbitmq生产者消费者

RabbitMQ是一个开源的消息队列系统&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c; 特点 可靠性&#xff1a;通过持久化、镜像队列等机制保证消息不丢失&#xff0c;确保消息可靠传递。灵活的路由&#xff1a;提供多种路由方式&#xff0c;如…...

Simple-BEV的bilinear_sample 作为view_transformer的解析,核心是3D-2D关联点生成

文件路径models/view_transformers 父类 是class BiLinearSample(nn.Module)基于https://github.com/aharley/simple_bev。 函数解析 函数bev_coord_to_feature_coord的功能 将鸟瞰图3D坐标通过多相机&#xff08;针孔/鱼眼&#xff09;内外参投影到图像特征平面&#xff0…...

Rust嵌入式开发环境搭建指南(基于Stm32+Vscode)

Rust嵌入式开发环境搭建指南(基于Stm32+Vscode) 部分目录如下所示: 目录 简介Rust开发环境安装STM32开发工具链安装VSCode环境配置VSCode插件安装调试器配置项目创建与配置常见问题与解决方案简介 本文档旨在指导开发者如何搭建基于Rust语言的STM32嵌入式开发环境。相比传…...

springboot操作redis集群,注意事项

整合redis可查看博文 springboot 整合redis_springboot整合redis csdn-CSDN博客 集群中操作注意事项 1 多键操作失败&#xff1a; 当使用multiGet等需要同时访问多个键的方法时&#xff0c;如果没有使用Hash Tags&#xff0c;这些键可能会被分配到不同的槽中。如果这些槽位于…...

计算机技术系列博客——目录页(持续更新)

1.1 博客目录专栏 1.1.1 博客文章导航 计算机技术系列博客——目录页 1.1.2 网页资源整理 2.1 计算机科学理论 2.2 软件工程技术 2.2.1.1 编程语言 Java Java语言基础 (1) Java基础知识总结01——Java基础篇 (2) Java基础知识总结02——集合框架篇 (3) Java基础知识总结03—…...

@maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置

maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置 关于 maptalks/gl-layers 中 VectorTileLayer 的 setStyle 方法 在 maptalks/gl-layers 库中&#xff0c;VectorTileLayer 提供了一个灵活的方式来设置矢量瓦片图层的样式。通过调用 setStyle 方法&#xf…...