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

前端跨域问题怎么在后端解决

news 来源：原创 2025/7/15 14:03:07

简单的解决方法：

添加配置类：

为什么会跨域

1. 什么是源

2. URL结构

3. 同源不同源举🌰

同源例子

不同源例子

4. 浏览器为什么需要同源策略

5. 常规前端请求跨域

简单的解决方法：

添加配置类：

package com.company.usercenter.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173") // 前端地址,可以写多个，线上地址、开发地址、测试地址.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).allowedHeaders("*");}
}

解决方法写完了，下面是具体的解释，请需要看的小伙伴选择性查收❤❤❤❤❤❤❤❤

首先解释下这个配置类：

这个 CorsConfig 配置类是用于解决前后端分离开发中的跨域问题，以下是对代码的详细解释：

注解与类定义 @Configuration：表明这是一个 Spring 配置类，用于定义配置 bean 或引入其他配置。 implements WebMvcConfigurer：实现 Spring 的 WebMvcConfigurer 接口，通过重写接口方法扩展 Spring MVC 的功能，这里用于配置跨域规则。
addCorsMappings 方法通过 CorsRegistry 对象注册跨域规则： registry.addMapping("/")：定义跨域规则的匹配路径，"/" 表示匹配所有后端接口路径，即所有接口都应用该跨域规则。 allowedOrigins("http://localhost:5173")：指定允许访问后端接口的前端来源（Origin）。这里明确允许 http://localhost:5173（通常是前端开发服务器地址）发起的跨域请求，不能使用 * 搭配 allowCredentials(true)（因为 * 会忽略凭证携带）。 allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")：允许的请求方法，包括常见的 GET（查询）、POST（提交）、PUT（更新）、DELETE（删除），以及跨域预检请求 OPTIONS。 allowCredentials(true)：允许前端请求携带认证凭证（如 Cookie、HTTP 认证等）。开启后，前端需配合 withCredentials: true（如 Axios 中 myAxios.defaults.withCredentials = true）使用。 allowedHeaders("*")：允许前端请求携带任意请求头（Header）。若需限制，可改为具体头名称（如 "Content-Type", "Authorization"），提升安全性。
整体功能该配置类为后端接口开启跨域支持，允许 http://localhost:5173 来源的前端应用，使用多种请求方法、携带凭证和任意请求头访问后端所有接口，解决前后端分离开发中的跨域问题。实际生产环境中，allowedOrigins 和 allowedHeaders 应根据需求细化，避免过度开放。

为什么会跨域

说到跨域不得不谈的就是浏览器的同源策略，跨域也是因为浏览器这个机制引起的，这个机制的存在还是在于安全。

1. 什么是源

Web内容的源由用于访问它的URL 的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

同源不同源一句话就可以判断：就是url中 scheme host port 都相同即为同源。

下面认识下url 结构中的这三个部分。

2. URL结构

URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。

URL有如下结构组成：

Schme 或者 Protocol

Domain Name 也叫做host域名

port 端口号

Parameters参数

Anchor 锚点，一般用于定位位置

3. 同源不同源举🌰

举一下同源不同源的例子，便于

同源例子

例子	原因
http://example.com/app1/index.html http://example.com/app2/index.html	相同的 scheme http 和host
http://Example.com:80 http://example.com	http 默认80端口所以同源

不同源例子

例子	原因
http://example.com/app1 https://example.com/app2	不同的协议
http://example.com http://myapp.example.com	不同的host
http://example.com http://example.com:8080	不同的端口

4. 浏览器为什么需要同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

5. 常规前端请求跨域

在没有前后端分离的时候，跨域问题往往是很少的。因为前后端都部署到一起。现在前后端分离不管vue /react 面临跨域请求的问题。

下面是引用官网描述的一张图来解释跨域：

跨源域资源共享（CORS）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 请求所带来的风险。

前端跨域问题怎么在后端解决

目录简单的解决方法： 添加配置类： 为什么会跨域 1. 什么是源 2. URL结构 3. 同源不同源举🌰 同源例子不同源例子 4. 浏览器为什么需要同源策略 5. 常规前端请求跨域简单的解决方法： 添加配置类： packag…...

编程日记 2025/7/15 14:03:07

生成式 AI 的工作原理

在科技浪潮汹涌澎湃的当下，生成式 AI 宛如一颗璀璨的新星，照亮了我们探索未知的征程。它不再仅仅是科幻电影中的幻想，而是已经悄然融入我们生活的方方面面，从智能客服的贴心应答，到艺术创作的天马行空，生成式 AI 正以一种前所未有的姿态重塑着世界。然而，你是否曾好奇，…...

编程日记 2025/7/15 12:52:38

DeepSeek辅助学术写作之修订与校稿以及发表与推广相关提示词分享祝你顺利毕业~

目录 1.修订与校对 2.发表与推广大家好这里是AIWritePaper官方账号，官网👉AIWritePaper~ 宝子们可以使用小编精选的“ChatGPT研究论文提示词”集合来创建研究论文。利用ChatGPT的智能回应生成详尽有效的内容，这样可以加快研究论文的策划、…...

编程日记 2025/7/15 12:47:15

叠层阻抗线框

1.阻抗介绍特性阻抗：又称“特征阻抗”，它不是直流电阻，属于长线传输中的概念。在高频范围内，信号传输过程中，信号沿到达的地方，信号线和参考平面（电源或地平面）间由于电场的建立&am…...

编程日记 2025/6/29 7:17:48

大数据：驱动技术创新与产业转型的引擎

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 在全球数字化转型的浪潮中，大数据已经成为推动各行各业革新的核心力量。随着信息技术的迅猛发展，数据的收集、存储、处理和分析能力不断提升，大数据不仅改变了企业的运营模式，更引领了技术创新和产业结构…...

编程日记 2025/6/29 5:55:05

C++继承基础总结

引言在编写多个类时，类之间可能会存在多个相同的成员变量，导致代码冗余度过高，C继承的出现，使得我们可以在已有类的基础上构建新类，从而实现代码复用与结构扩展。一、继承的基本概念继承是指子类（派生…...

编程日记 2025/6/29 6:19:47

2025年斯诺克世锦赛——“75三杰”在1/4决赛作为对手的概率

“在最近的斯诺克世锦赛中，中国两名球员成功挺进前8强。此外，前8强也出现令人感慨的一幕：75三杰全部进入到了八强，这也是历史第5次，50岁正是打拼的年纪！传奇之旅继续！”——摘自50岁正是打拼的年…...

编程日记 2025/6/29 5:43:00

Python绘制地球的重力地图

文章目录 Boule重力地图从ensaio下载重力数据Boule boule中定义了多种参考椭球，可用于表示地球、火星等星体的重力分布。可通过pip安装 pip install bouleboule中已经定义的椭球如下椭球GRS80WGS84MARSMERCURYMOONVENUSVESTA星体地球地球火星水星月球金星灶神星这些椭球可直…...

编程日记 2025/6/29 7:50:06

多端定制系统开发：打造高效全平台覆盖的APP解决方案

在移动互联网时代，用户需求日益多样化，企业若想触达更广泛的受众，仅靠单一平台的应用已远远不够。无论是iOS、Android、Web端，还是智能手表、车载设备等新兴终端，多端适配已成为企业数字化转型的刚需。多端定制系统开发…...

编程日记 2025/6/29 7:19:42

WGDI-分析WGD及祖先核型演化的集成工具-文献精读126

WGDI: A user-friendly toolkit for evolutionary analyses of whole-genome duplications and ancestral karyotypes WGDI：一款面向全基因组重复事件与祖先核型演化分析的易用工具集摘要在地球上大多数主要生物类群中，人们已检测到全基因组复制&…...

编程日记 2025/6/29 5:12:41

旋转矩阵公式理解

这里给出其中一种理解方法： 设原始直角坐标系下的坐标为(x,y)，我们可以将它分解为两个向量(x,0)和(0,y)。接下来将两个向量分别顺时针旋转θ度，二者就会分别变成：(xcosθ,xsinθ)和(-ysinθ,ycosθ)。也就是说，二者…...

编程日记 2025/6/29 5:12:44

网络Tips20-002

1..某主机接口的IP地址为192.16.7.131/26.则该IP地址所在网络的广播地址是：192 16.7.191 广播地址是指在特定网络上发送广播消息的地址。它用于向网络上的所有设备发送信息。方法1：广播地址掩码取反和网络地址的或运算方法2：广播地址将网…...

编程日记 2025/6/29 8:22:04

# 关闭iptables，使用firewall systemctl disable iptables # 禁用服务 systemctl stop iptables # 关闭服务 systemctl status iptables # 查看服务状态 systemctl enable firewalld # 设置防火墙开机自启动 systemctl start firewalld # 开启服务 systemctl s…...

编程日记 2025/6/29 5:12:43

SwiftUI-MLX本地大模型开发（二）

介绍在 SwiftUI-MLX本地大模型开发一文中，我们已经详细讲了如何利用 MLX 进行本地大模型的开发。但是通过案例可以发现 2 个问题： MLX 内置的大模型数量有限。每次大模型都需要从 HuggingFace 下载。如何解决这 2 个问题，方案是&#xff1a…...

编程日记 2025/6/28 20:04:45

基于「骑手外卖系统」串联7大设计原则

你说得对！这些设计原则听起来都很抽象、很“玄”，如果不是实际开发过系统，很难理解“到底为什么要这样设计”。那我现在就用一个你能想象得很清楚的真实例子，帮你把这7个设计原则一一落地到具体情境里，你会一眼明白。…...

编程日记 2025/6/29 9:00:58

泰迪杯特等奖案例学习资料：基于时空图卷积网络的城市排水系统水位精准重建与异常检测

（第十四届泰迪杯数据挖掘挑战赛A题特等奖案例解析）一、案例背景与核心挑战 1.1 应用场景与行业痛点城市排水系统（Urban Drainage Network, UDN）是城市基础设施的重要组成部分，其运行效率直接影响防洪排涝能力和水环境质量。然而，实际运维中面临以下难题：监测数据稀…...

编程日记 2025/6/29 9:00:57

嵌入式Linux应用项目----智能网关

一、网关概述： Linux网关的作用在于，通过蓝牙、LoRa、串口、CAN等接口，与哪些无法连接网络的设备建立联系，将它们的数据转发至服务器。这过程中，网关充当了数据的桥梁，将下级设备所产生的数据发送至服务器。…...

编程日记 2025/6/29 9:00:59

C++ 中的继承

目录前言一、继承的概念及定义二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承及菱形虚拟继承 （一）单继承与多继承 （二）菱形继承 …...

编程日记 2025/6/29 9:00:28

【中间件】brpc_基础_用户态线程上下文

文章目录 context介绍1 简单介绍2 主要功能2.1 上下文结构定义2.2 上下文切换实现2.3 协程栈管理2.4 平台兼容性处理2.5 性能优化 3 关键代码逻辑示例3.1 上下文初始化 (bthread_make_fcontext)3.2 上下文切换 (bthread_jump_fcontext) 4 与 BRPC 其他模块的协作5 性能与稳定性…...

编程日记 2025/6/29 9:00:24

蟋蟀的叫声,大自然的温度计

夏夜草丛中，蟋蟀的鸣叫声此起彼伏。有趣的是，它们的叫声频率竟然与气温有关！根据图片中的公式： 气温 ( X 8 ) 5 9 \text{气温} \frac{(X 8) \times 5}{9} 气温9(X8)5 只需记录蟋蟀在 15 秒内的鸣叫次数（ X X X…...

编程日记 2025/6/29 9:00:46

文献总结：TPAMI端到端自动驾驶综述——End-to-End Autonomous Driving: Challenges and Frontiers

端到端自动驾驶综述 1. 文章基本信息2. 背景介绍3. 端到端自动驾驶主要使用方法3. 1 模仿学习3.2 强化学习 4. 测试基准4.1 真实世界评估4.2 在线/闭环仿真测试4.3 离线/开环测试评价 5. 端到端自动驾驶面临的挑战5.1 多模态输入5.2 对视觉表征的依赖5.3 基于模型的强化学习的世…...

编程日记 2025/6/29 9:01:44

二极管反向恢复的定义和原理

二极管的反向恢复定义二极管的反向恢复是指二极管从正向导通状态切换到反向阻断状态时，电流从正向变为负向并最终回到零所需的时间。具体过程如下： 正向导通：当二极管正向偏置时，电流可以顺利通过，此时二极管处于导…...

编程日记 2025/6/29 9:01:15

# 基于词袋模型（BoW）的猫狗图像分类实践

基于词袋模型（BoW）的猫狗图像分类实践在计算机视觉领域，图像分类是一项基础且重要的任务。本文将介绍如何使用词袋模型（Bag of Words, BoW）结合支持向量机（SVM）实现猫狗图像分类。通过详细的代…...

编程日记 2025/6/29 9:00:39

Vscode+git笔记

1.U是untracked m是modify modified修改了的。 2.check out 查看观察 3 status changed 暂存区 4.fetch v 取来拿来 5.orangion 起源代表远程分支 git checkout就是可以理解为进入的意思。...

编程日记 2025/6/29 6:08:42

生成式 AI 的未来

在人类文明的长河中，技术革命始终是推动社会跃迁的核心引擎。从蒸汽机解放双手，到电力点亮黑夜，再到互联网编织全球神经网络，每一次技术浪潮都在重塑人类的生产方式与认知边界。而今天，生成式人工智能（Generative AI）正以一种前所未有的姿态登上历史舞台——它不再局限于…...

编程日记 2025/6/29 6:20:13

进程间通信（IPC）

进程间通信（IPC）是操作系统中非常重要且基础的概念，涉及到不同进程之间如何交换数据和同步操作。下面我会一个一个地详细讲解这几种常见的IPC方式：管道（包含匿名管道和有名管道）、消息队列、共享内存、信号量、Socket通信，内容尽量用通俗易懂的语言，并结合具体原理、优…...

编程日记 2025/6/29 7:14:42

C语言奇幻指南：宏、头文件与变量的秘密世界

🌟 C语言奇幻指南：宏、头文件与变量的秘密世界 🌟 一、写一个“比小”宏：三目运算符的魔法目标：定义一个宏，返回两个参数中较小的值。代码： #define MIN(a, b) ((a) < (b) ? (a) : (b))…...

编程日记 2025/6/29 7:57:34

【开源免费】二维码批量识别-未来之窗——C#-仙盟创梦IDE

二维码批量识别工具，借助先进图像识别技术，能快速准确读取大量二维码信息。适用于物流与供应链管理，如库存盘点和货物追踪；可用于资产管理，像固定资产盘点与设备巡检；还能助力数据收集与市场调研&#xff0…...

编程日记 2025/6/29 6:26:59

n8n工作流自动化平台的实操：解决中文乱码

解决问题： 通过ftp读取中文内容的文件，会存在乱码，如下图： 解决方案 1.详见《安装 iconv-lite》 2.在code节点，写如下代码： const iconv require(iconv-lite);const items $input.all(); items.forEa…...

编程日记 2025/6/29 5:22:50

MCP 探索：MCP 集成的相关网站 Smithery、PulseMCP 等

简简单单 Online zuozuo ：本心、输入输出、结果文章目录 MCP 探索：MCP 集成的相关网站 Smithery、PulseMCP 等前言一、MCP 集成基础二、利用热门资源平台集成三、集成常见 MCP 服务四、管理集成的 MCP 能力五、集成示例借鉴六、数据交互与安全管理MCP 探索：MCP 集成的相关网…...

编程日记 2025/6/29 6:28:37

linux的时间轮

时间轮：高效管理海量定时任务的利器 1. 引言：为什么需要时间轮？ 在许多应用场景中，我们都需要管理大量的定时任务，例如： 网络连接的超时检测。分布式系统中的心跳检测。缓存条目的过期淘汰。需要延迟执行…...

编程日记 2025/6/29 7:57:51

《操作系统真象还原》第十二章（2）——进一步完善内核

文章目录前言可变参数的原理实现系统调用write更新syscall.h更新syscall.c更新syscall-init.c 实现printf编写stdio.h编写stdio.c 第一次测试main.cmakefile结果截图完善printf修改main.c 结语前言上部分链接：《操作系统真象还原》第十二章（1&#…...

编程日记 2025/6/29 6:11:37

MIT6.S081-lab8前置

MIT6.S081-lab8前置注：本部分除了文件系统还包含了调度的内容。调度调度涉及到保存寄存器，恢复寄存器，就这一点而言，和我们的 trap 很像，但是实际上，我们实现并不是复用了 trap 的逻辑，我…...

编程日记 2025/7/9 11:26:20

Java从入门到精通 - Java语法

Java 语法此笔记参考黑马教程，仅学习使用，如有侵权，联系必删文章目录 Java 语法01 变量详解1. 变量里的数据在计算机中的存储原理1.1 二进制1.2 十进制转二进制的算法1.3 计算机中表示数据的最小单元总结1.4 字符在计算机中是如何存储的呢…...

编程日记 2025/6/29 6:50:23

【CF】Day50——Codeforces Round 960 (Div. 2) BCD

B. Array Craft 题目： 思路： 有点意思的构造首先题目告诉我们 y < x，这是一个重要的条件我们先来考虑简单情况，假如可以放0进去，那么我们只需要在 y ~ x 之间全放 1 ，其余都是 0 即可，但…...

编程日记 2025/6/29 7:36:14

MySQL 日期加减函数详解

MySQL 日期加减函数详解 1. DATE_ADD 函数基本语法 DATE_ADD(date, INTERVAL expr unit)功能在指定日期/时间上添加一个时间间隔参数说明 date：要处理的日期/时间值（可以是DATE, DATETIME或TIMESTAMP类型）expr：要添加的间…...

编程日记 2025/6/29 6:48:30

NV189NV195美光固态闪存NV197NV199

NV189NV195美光固态闪存NV197NV199 在存储技术持续迭代的2025年，美光固态闪存NV189、NV195、NV197、NV199系列凭借其差异化的性能定位，正在重新定义数据存储的边界。本文将从技术参数、场景适配、行业价值等维度，为不同领域的专业人士提供深度…...

编程日记 2025/7/5 0:53:23

C语言-回调函数

回调函数通过函数指针调用函数，而这个被调用的函数称为回调函数回调函数是C语言中一种强大的机制，允许将函数作为参数传递给其他函数，从而在特定时机由后者调用。它的核心在于函数指针的使用以下是回调函数的使用例子先创建好一个函数…...

编程日记 2025/6/29 6:53:05

启发式算法-蚁群算法

蚁群算法是模拟蚂蚁觅食行为的仿生优化算法，原理是信息素的正反馈机制，蚂蚁通过释放信息素来引导同伴找到最短路径。把问题的元素抽象为多条路径，每次迭代时为每只蚂蚁构建一个解决方案，该解决方案对应一条完整的路径，…...

编程日记 2025/6/29 6:53:32

DeepSeek与MySQL：开启数据智能新时代

目录一、引言：技术融合的力量二、DeepSeek 与 MySQL：技术基石2.1 DeepSeek 技术探秘2.2 MySQL 数据库深度解析三、DeepSeek 与 MySQL 集成：从理论到实践3.1 集成原理剖析3.2 集成步骤详解四、应用案例：实战中的价值体现4.1 电商…...

编程日记 2025/7/8 11:20:34

Modbus 通讯协议（超详细，简单易懂）

目录一、协议中的寄存器定义二、协议概述三、使用串口的Modbus 报文帧编辑 3.1、Modbus ASCII 模式 3.2、Modbus RTU 模式 3.3、功能码概要 3.4、Modbus 报文分析四、什么是RS-485 RS-232？ 一、协议中的寄存器定义阅读 Modbus 协议时会发现它的概念别扭…...

编程日记 2025/6/29 5:12:47

单细胞测序试验设计赏析（一）

单细胞测序试验设计赏析（一） 单细胞测序试验设计中，单细胞测序技术通常会结合其它的技术来共同说明问题，或者结合年龄、性别等临床数据，进行分层分析说明问题以下以发表文章来进行一定的分析。 Single-cell RNA seque…...

编程日记 2025/6/29 6:17:12

ES6入门---第二单元模块三：对象新增、

一：对象简洁语法： 1、变量简洁 <script>let name Strive;let age 18;let json {name, //name:name,age //age:age};console.log(json);</script> 2、函数简洁 let json {name, //name:name,age, //age:age/* showA:functi…...

编程日记 2025/6/29 7:19:09

多元随机变量协方差矩阵

主要记录多元随机变量数字特征相关内容。关键词：多元统计分析二元随机变量(X, Y) 说明：可以理解变量中的 X为身高、Y为体重总体协方差 σ X Y c o v ( X , Y ) E [ ( X − μ X ) ( Y − μ Y ) ] E ( X Y ) − μ X μ Y \sigma_{XY}cov(X, Y)E[…...

编程日记 2025/6/29 7:55:47

计算机网络-同等学力计算机综合真题及答案

计算机网络-同等学力计算机综合真题及答案 （2003-2024） 2003 年网络第二部分计算机网络（共 30 分） （因大纲变动因此 2004 年真题仅附真题，不作解析。） 一、填空题（共 10 分&#…...

编程日记 2025/6/29 5:12:52

[案例二] 菜单条制作(Menuscript)与工具条制作(Toolbar)

最近五一正好毕业论文盲审，抽时间研究一下菜单条制作(Menuscript)与工具条制作(Toolbar)的制作，在NX二次开发中唐康林老师已经讲的很详细了，在这里只对视频中的内容进行总结，并且根据自己的想法进行补充。在里海博主的直播教学中发现一个很有趣的NX图标工具，本人大概做了一…...

编程日记 2025/6/29 8:13:33

bellard.org‌ : QuickJS 如何使用 qjs 执行 js 脚本

参阅上一篇：Fabrice Bellard（个人网站：‌bellard.org‌）介绍 Fabrice Bellard（个人网站：‌bellard.org‌）是计算机领域最具影响力的程序员之一，其贡献跨越多个技术领域并持续推动开…...

编程日记 2025/6/29 6:09:18

计组复习笔记 3

前言继续做例题。昨天做到第一个就把我难住了。可恶。 4.1 地址码越长，操作码越短。因为两者加起来是指令字，指令字的大小一般是固定的。扩展编码按照操作码从短到长进行编码。算了先放一下。我先看一下别的复习资料。等会儿再看这个题。鼓励自己 …...

编程日记 2025/6/29 6:36:04

GCD 深入解析：从使用到底层实现

前言 Grand Central Dispatch (GCD) 是 Apple 基于 C 语言开发的一套完整的并发编程框架。它不仅仅是一个简单的线程管理工具，而是一个高度优化的并发编程解决方案。GCD 的设计理念是将并发编程的复杂性封装在框架内部，为开发者提供简单易用的接口。本文…...

编程日记 2025/6/29 5:53:53

JavaScript中的AES加密与解密：原理、代码与实战

前言关于有js加密、js解密，js业务相关，找jsjiami官网站长v。另外前段时间做了个单子跑单了，出售TEMU助手。eller点kuajingmaihuo点com的全自动化助手，可以批量合规，批量实拍图，批量资质上传等。一、A…...

编程日记 2025/7/9 14:29:07

简单的解决方法：

添加配置类：

为什么会跨域

1. 什么是源

2. URL结构

3. 同源不同源举🌰

同源例子

不同源例子

4. 浏览器为什么需要同源策略

5. 常规前端请求跨域

相关文章：