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

解决跨域问题方案

news 来源：原创 2025/7/16 0:09:43

跨域问题在前后端分离架构下尤为常见，是每个 Web 开发者都会遇到的核心问题。本文将通过原理解析、场景剖析、解决方案详解以及最佳实践等多个维度，帮助开发者全面理解并有效应对跨域问题。

- - **一、跨域的本质**
  - - **1. 同源策略**
    - **2. 同源策略的限制范围**
    - **3. 为什么需要同源策略**
  - **二、跨域问题的常见场景**
  - - **1. 前后端分离**
    - **2. 第三方服务调用**
    - **3. 静态资源加载**
    - **4. 跨协议请求**
  - **三、跨域的解决方案详解**
  - - **1. CORS（跨域资源共享）**
    - - **CORS 在 Spring Boot 中的配置**
    - **2. 代理服务器转发**
    - **3. JSONP（仅支持 GET 请求）**
    - **4. iframe + postMessage**
    - **5. 后端设置 JSONP API**
  - **四、最佳实践**
  - **五、总结**

一、跨域的本质

1. 同源策略

跨域问题的根本源于浏览器的同源策略（Same-Origin Policy）。同源策略是浏览器的一种安全机制，用于限制不同源的文档或脚本如何彼此交互，以保护用户的数据安全。

同源的定义：协议、域名、端口号必须一致。

属性示例 1 示例 2 是否同源
协议 http://example.com https://example.com 否
域名 http://example.com http://api.example.com 否
端口号 http://example.com:80 http://example.com:8080 否

属性	示例 1	示例 2	是否同源
协议	`http://example.com`	`https://example.com`	否
域名	`http://example.com`	`http://api.example.com`	否
端口号	`http://example.com:80`	`http://example.com:8080`	否

2. 同源策略的限制范围

同源策略主要限制以下行为：

Cookie、LocalStorage 和 SessionStorage 的读取
DOM 和 JavaScript 对象的访问
AJAX 请求（尤其是跨域数据的访问）

3. 为什么需要同源策略

同源策略主要是为了防止以下安全风险：

跨站脚本攻击（XSS）：恶意页面通过脚本窃取用户数据。
跨站请求伪造（CSRF）：利用用户身份对目标网站执行未授权操作。
数据劫持：防止不受信任的域窃取敏感信息。

二、跨域问题的常见场景

1. 前后端分离

现代 Web 应用通常采用前后端分离架构，前端通过 AJAX 请求与后端进行交互。当前端和后端运行在不同的域时，会触发跨域问题。例如：

前端：http://localhost:3000
后端：http://localhost:8080

2. 第三方服务调用

前端需要请求第三方 API，例如调用 https://api.example.com 提供的开放服务，这种场景也会引发跨域问题。

3. 静态资源加载

页面运行在 http://example.com，而静态资源托管在 CDN（如 https://cdn.example.com）上。

4. 跨协议请求

例如从 HTTP 页面调用 HTTPS 服务。

三、跨域的解决方案详解

1. CORS（跨域资源共享）

CORS 是 W3C 提出的标准解决方案，允许服务端通过设置特定的响应头，告知浏览器允许跨域访问。

CORS 的关键响应头：
- Access-Control-Allow-Origin：允许的源（如 http://example.com，或 * 代表允许所有源）。
- Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET, POST）。
- Access-Control-Allow-Headers：允许的自定义请求头（如 Authorization）。
- Access-Control-Allow-Credentials：是否允许携带凭证（如 Cookie）。
- Access-Control-Max-Age：预检请求的缓存时间。

CORS 在 Spring Boot 中的配置

Spring Boot 提供了多种方式支持 CORS：

全局配置
使用 WebMvcConfigurer 添加全局的 CORS 配置。

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://example.com").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
}

局部配置
在控制器类或方法上使用 @CrossOrigin 注解。

@RestController
@RequestMapping("/api")
public class MyController {@CrossOrigin(origins = "http://example.com")@GetMapping("/data")public ResponseEntity<String> getData() {return ResponseEntity.ok("Hello, World!");}
}

通过过滤器统一配置
使用 OncePerRequestFilter 创建全局 CORS 过滤器。

@Component
public class CORSFilter extends OncePerRequestFilter {@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)throws ServletException, IOException {response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");response.setHeader("Access-Control-Allow-Credentials", "true");filterChain.doFilter(request, response);}
}

2. 代理服务器转发

通过代理服务器将跨域请求转发为同源请求，避免跨域问题。

开发环境中的前端代理

React 配置代理：
```
{"proxy": "http://localhost:8080"
}
```

Vue 配置代理：

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
};

Nginx 反向代理

server {listen 80;server_name example.com;location /api/ {proxy_pass http://backend-service:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
}

3. JSONP（仅支持 GET 请求）

通过 <script> 标签加载远程数据，并利用回调函数实现跨域通信。

前端调用示例：

<script>function handleResponse(data) {console.log(data);}
</script>
<script src="http://example.com/api?callback=handleResponse"></script>

后端返回数据：

handleResponse({"message": "success"});

4. iframe + postMessage

通过嵌入跨域的 iframe，并使用 postMessage 方法实现通信。

父页面代码：

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('hello', 'http://example.com');window.addEventListener('message', (event) => {if (event.origin === 'http://example.com') {console.log(event.data);}
});

5. 后端设置 JSONP API

在后端返回一个 JavaScript 函数的调用来传递数据，这种方法兼容性较好但仅适用于简单场景。

四、最佳实践

安全性：
- 指定可信任的跨域源，不建议使用通配符（*）。
- 对敏感数据接口加强认证和授权控制。
性能优化：
- 使用 Access-Control-Max-Age 缓存预检请求结果。
- 减少跨域请求次数，合并或延迟请求。
复杂场景下的组合解决方案：
- 开发阶段使用前端代理，生产环境使用 Nginx 反向代理。
- 配合 CORS 配置和全局过滤器处理复杂跨域请求。

五、总结

跨域问题是浏览器同源策略带来的限制，其根本目的是保护用户数据安全。通过 CORS 配置、全局过滤器、代理服务器等方法，可以灵活解决不同场景下的跨域问题。在实际开发中，应结合项目需求，选择最合适的解决方案，同时注重安全性和性能优化，从而构建更高效、更安全的 Web 应用。

解决跨域问题方案

跨域问题在前后端分离架构下尤为常见，是每个 Web 开发者都会遇到的核心问题。本文将通过原理解析、场景剖析、解决方案详解以及最佳实践等多个维度，帮助开发者全面理解并有效应对跨域问题。目录 **一、跨域的本质****1. 同源策略****2. 同源策略的限制范…...

编程日记 2025/7/16 0:09:43

【python自动化五】接口自动化基础--requests的使用

python的接口请求可以用requests库，这个介绍就不多说了，网上说得很详细。接下来直接记录下如何使用（当然也不限于自动化的使用） 1.安装requests requests也需要安装一下 pip install requests2.requests请求 1.常用的请求方法…...

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

文本三剑客——grep命令

介绍作用 Linux grep (global regular expression) 命令用于查找文件里符合条件的字符串或正则表达式。常用选项 -i：忽略大小写进行匹配。-v：反向查找，只打印不匹配的行。-n：显示匹配行的行号。-r：递归查找子目录…...

编程日记 2025/7/15 23:13:31

ASP 实例：深入解析与实战应用

ASP 实例：深入解析与实战应用引言 ASP（Active Server Pages）是一种由微软开发的服务器端脚本环境，用于动态网页设计和开发。它允许开发者创建和运行动态交互性网页，如访问数据库、发送电子邮件等。本文将深入探讨AS…...

编程日记 2025/7/12 19:03:33

文件的操作

什么是文件如何是数据持久化——保存在硬盘上(文件，数据库)磁盘上的文件是文件在程序设计中，我们一般谈的文件有两种：程序文件、数据文件程序文件，比如源文件（.c文件）读a文件写到b文件里，此时a…...

编程日记 2025/7/15 23:51:59

UCIE PHY LSM链路训练 1 UCIE PHY LSM1.1 RESET1.2 SBINT1.3 MBINT1.3.1 MBINT.PARAM1.3.2 MBINIT.CAL1.3.3 MBINIT.REPAIRCLK1.3.4 MBINIT.REPAIRVAL1.3.5 MBINIT.REVERSALMB1.3.6 MBINIT.REPAIRMB 1.4 MBTRAIN1.5 LINKINIT1.6 ACTIVE1.7 L1/L21.8 PHY.RETRAIN1.9 TRAIN.ERROR…...

编程日记 2025/7/15 23:50:36

数学二常用公式（高等数学+线性代数）

目录高等数学第一章函数、极限和连续第二章一元函数微分学第三章一元函数积分学第四章多元函数微分学第五章多元函数积分学第六章常微分方程线性代数线性代数篇章涉及的知识内容及常用公式第一章行列式第二章矩阵第三章向量第四章线性方程组第五章矩阵的相似化简第…...

编程日记 2025/7/15 1:08:31

【Java计算机毕业设计】Springboot+vue动物保护协会管理系统【源代码+数据库+LW文档+开题报告+答辩稿+部署教程+代码讲解】

源代码数据库LW文档（1万字以上）开题报告答辩稿部署教程代码讲解代码时间修改教程一、开发工具、运行环境、开发技术开发工具 1、操作系统：Window操作系统 2、开发工具：IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…...

编程日记 2025/7/15 23:33:15

鸿蒙面试---1208

HarmonyOS 三大技术理念分布式架构：HarmonyOS 的分布式架构使得设备之间能够无缝协同工作。例如，它允许用户在不同的智能设备（如手机、平板、智能手表等）之间共享数据和功能。比如，用户可以在手机上开始编辑文档&…...

编程日记 2025/7/15 23:26:16

【论文阅读】一名系统研究者的攀登之路

作者：陈海波陈海波是操作系统、系统结构、并行与分布式系统方向大牛，上海交通大学大牛团队学习体会： 计算机系统论文准备周期较长，十有八九都是在解决新问题的路上~ 因此学习大佬的学习经验，少踩坑，把主…...

编程日记 2025/7/15 23:24:12

MySQL 索引（B+树）详解

MySQL 索引（B树）详解 MySQL逻辑架构对比InnoDB与MyISAM存储结构存储空间可移植性、备份及恢复事务支持AUTO_INCREMENT表锁差异全文索引表主键表的具体行数CRUD操作外键 sql优化简介什么情况下进行sql优化sql语句执行过程sql优化就是优化索引索引索引的优…...

编程日记 2025/7/15 23:25:15

【不稳定的BUG】__scrt_is_managed_app()中断

【不稳定的BUG】__scrt_is_managed_app函数中断参考问题详细的情况临时解决方案参考发现出现同样问题的文章: 代码运行完所有功能，仍然会中断问题详细的情况 if (!__scrt_is_managed_app())exit(main_result);这里触发了一个断点很奇怪,这中断就发生了一次,代…...

编程日记 2025/7/16 0:09:43

护网蓝队日志分析

Windows日志分析一、事件查看器在「事件查看器」中，可以查看系统中记录的所有事件日志。操作步骤如下： 1、打开 Windows 事件查看器 1、使用Windows R快捷键打开「运行」对话框，输入eventvwr.msc，然后按回车键打开事件查看…...

编程日记 2025/7/15 23:23:26

滤波器设计（八）-McClellan-Parks design algorithm

步骤 Initialization: Choose an extremal set of frequences {ωi(0)}.Finite Set Approximation: Calculate the best Chebyshev approximation on the present extremal set, giving a value δ(m) for the min-max error on the present extremal set.Interpolation: Calc…...

编程日记 2025/7/15 12:54:05

ElasticSearch常见的索引_集群的备份与恢复方案

方案一：使用Elasticsearch的快照和恢复功能进行备份和恢复。该方案适用于集群整体备份与迁移，包括全量、增量备份和恢复。方案二：通过reindex操作在集群内或跨集群同步数据。该方案适用于相同集群但不同索引层面的迁移，或者跨集…...

编程日记 2025/7/15 21:01:40

C#对Excel表csv文件的读写操作

C#对Excel表csv文件的读写一、变量定义二、加载主窗口三、创建表头四、向表中添加数据五、从表中读取数据六、单击按钮向表中添加数据七、测试验证一、变量定义 #region 变量定义 private string CurAppExeDir System.AppDomain.CurrentDomain.BaseDirectory; private strin…...

编程日记 2025/7/14 8:47:14

【MySQL】mysql服务器架构

目录 1、背景2、mysql服务器架构解释3、总结 1、背景简单理解一下mysql的服务器架构。 2、mysql服务器架构解释 mysql的架构图如下： 主要分为三部分：客户端、服务端、存储引擎。接下来我们来解释一下各个部分： 客户端用来连接mysql服务…...

编程日记 2025/7/14 8:40:21

Vue Web开发（三）

1. 添加el-menu样式将Home.vue文件重新命名为Main.vue文件，本节涉及新的home目录和User目录下的index.js文件，因为侧边导航栏Aside和顶部Header是在每一个页面都存在的，所以重新命名为Main，而home文件夹下的index.js则对应系统首…...

编程日记 2025/7/14 23:30:42

Java项目实战II基于微信小程序的小区租拼车管理信息系统（开发文档+数据库+源码）

目录一、前言二、技术介绍三、系统实现四、核心代码五、源码获取全栈码农以及毕业设计实战开发，CSDN平台Java领域新星创作者，专注于大学生项目实战开发、讲解和毕业答疑辅导。一、前言随着城市化进程的加速，小区居民对于出行方…...

编程日记 2025/7/13 19:13:15

云安全：云计算安全

目录云安全的定义和重要性云安全的关键组成部分云安全技术实现云安全最佳实践云安全的定义和重要性云安全是指在云计算环境中保护数据、应用程序和相关服务不受威胁的一系列策略、技术和控制措施。随着云计算的快速发展，云安全已成为企业和个人用户最关心…...

编程日记 2025/7/15 10:48:33

git clone加速（亲测好用）

用公司网git clone特别卡，本以为宿舍网会好一点，回来下的时候也只有几十kb. 然后找到了一种方法，就是在原始下载命令前加一个gitclone 比如 git clone https://github.com/infiniflow/ragflow.git替换成 git clone https://gitclone.com/gi…...

编程日记 2025/7/15 23:45:08

Python 网络爬虫进阶：突破数据采集的边界

在成功踏入 Python 网络爬虫的入门之境后，我们犹如初窥宝藏的探险家，领略到了数据采集世界的奇妙与潜力。而此刻，进阶之路在脚下徐徐展开，它将引领我们深入这片领域的更深处，挖掘出更为强大和精妙的爬虫技艺&#xff0…...

编程日记 2025/7/12 10:14:20

【网络安全】网站常见安全漏洞 - 网站基本组成及漏洞定义

文章目录引言1. 一个网站的基本构成2. 一些我们经常听到的安全事件3. 网站攻击者及其意图3.1 网站攻击者的类型3.2 攻击者的意图 4. 漏洞的分类4.1 按来源分类4.2 按危害分类4.3 常见漏洞与OWASP Top 10 引言在当今的数字化时代，安全问题已成为技术领域不可忽视的…...

编程日记 2025/7/14 6:12:10

[论文解读]Street Gaussians: Modeling Dynamic Urban Scenes with Gaussian Splatting

Street Gaussians是年初的一篇动态场景重建论文， 在当时是做到了SOTA，至今为止很多自动驾驶或者动态场景重建的文章都会将Street Gaussians作为实验的比较对象，这也表明了这篇文章的重要性，今天就一起来看看这篇文章； …...

编程日记 2025/7/15 1:24:14

在Github上上传大文件的办法（图文版）

在上一篇笔记中，笔者用图文的形式介绍了如何在GITHUB中上传文件夹。可参考这篇笔记在GITHUB上传本地文件指南（详细图文版）-CSDN博客但接下来，笔者在继续上传别的文件的过程中，遇到了新的问题，gitbash…...

编程日记 2025/7/11 1:06:11

关于springBoot+vue项目中配置SSL证书问题

前端可以通过https进行访问 1.前端在访问后端接口时，使用https进行访问，在request.js配置文件中，这个文件是配置axios的基本请求的，在基础请求地址中改为https方式 2.需要在Linux中的nginx中配置ssl证书，具体请参考&…...

编程日记 2025/7/14 15:40:38

GitLab

Git服务器一、概念 C/S 架构的 Git 服务端是存放代码的公用平台是多人并行协作的核心部分通常单独部署在一台独立的服务器上客户端可以通过网络访问服务器上的仓库 GitLab搭建一、部署 1、安装依赖包 [rootGitLab ~]# yum -y install policycoreutils-python-utils.noarc…...

编程日记 2025/7/14 20:10:23

TCP客户端服务器端通信（线程池版）

1、什么是监听套接字，和UDP相比，TCP为什么文件描述符变多了？ 在网络编程中，TCP和UDP是两种常见的传输协议，它们之间最大的不同之一在于连接的管理方式。为了更好地理解这个区别，我们可以用一个生动的比喻来…...

编程日记 2025/7/15 22:12:19

go语言的成神之路-标准库篇-fmt标准库

目录一、三种类型的输出 print： println： printf： 总结： 代码展示： 二、格式化占位符 %s：用于格式化字符串。 %d：用于格式化整数。 %f：用于格式化浮点数。 %v&#xff1…...

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

高级java每日一道面试题-2024年12月08日-JVM篇-什么是类加载器?

如果有遗漏,评论区告诉我进行补充面试官: 什么是类加载器? 我回答: 在Java高级面试中，类加载器（ClassLoader）是一个重要的概念，它涉及到Java类的加载和初始化机制。以下是对类加载器的详细解释： 定义与作用类加…...

编程日记 2025/7/8 21:08:33

数据库之连接池Druid

Druid是一个由阿里巴巴开源的高性能数据库连接池组件，它在许多项目中都是首选的连接池实现。Druid不仅提供了高效的连接管理，还具备丰富的监控和统计功能，以及强大的安全特性。一、功能介绍 1、高效连接管理 Druid采用了高效的连接管理机…...

编程日记 2025/7/10 19:19:59

【如何审稿】Notes on Constructive and Positive Reviewing

学习体会： 用chatgpt翻译的2005年审稿人如何审稿的一篇文章, 学着用审稿人的角度评审自己写的稿件~ 全文摘录: 作为审稿人，您代表的是您的社区，您的审稿意见应当是专业和建设性的。会议的质量取决于审稿的质量。审稿人的任务是选出高质量、创…...

编程日记 2025/7/11 0:30:29

1.文本方块方法（Spacy Text Splitter 方法）Can‘t find model ‘zh_core_web_sm‘

一、概述执行如下： def split_spacy(text):import spacynlp spacy.load( "zh_core_web_sm" ) doc nlp(text) for s in doc.sents: print(s) # d:\programdata\anaconda3\envs\python310\lib\site-packages if __name__"__main__":text &q…...

编程日记 2025/7/13 10:37:17

IT类项目实施流程

一、项目启动准备阶段（一）甲方组建项目委员会 **甲方委员会确立：**指定负责人，全权负责整个项目人员、启动及时间调配、需求确定及需求变更、项目节点的验收、项目款项的支付工作。（二）乙方组建项目实施工作组 **乙方实施工作组确立：**工作组主要包括项目经理、需…...

编程日记 2025/7/10 4:44:24

数据分析平台业务落地痛点分析

在当今数字化时代，数据已成为企业决策和运营的核心驱动力。数据分析平台作为数据处理和洞察的重要工具，其业务落地过程中的痛点分析对于企业的数据战略至关重要。本文将通过概述、功能点、背景、业务点、底层原理等多个方面，深入剖析数据分析…...

编程日记 2025/7/14 9:48:41

java语言学习（5）

第九章目录类变量和类方法理解main方法语法代码块单列设计模式 final关键字抽象类接口类变量/静态变量该变量最大的特点就是会被本类的所有对象实例共享，类变量可以通过类名来访问分析代码，探讨内存的分配 class Child{private Str…...

编程日记 2025/7/10 22:09:00

基于SSM框架点餐管理系统（计算机毕业设计）论文，Java

系统合集跳转源码获取链接一、系统环境运行环境: 最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 IDE环境： Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境： Tomcat 7.x,8.x,9.x版本均可操作系统…...

编程日记 2025/7/13 16:54:08

独家首发 | 基于 KAN、KAN卷积的轴承故障诊断模型

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理基于FFT CNN - BiGRU-Attention 时域、频域特征注意力融合的轴承故障识别模型-CSDN博客基于FFT CNN - Transformer 时域、频域特征融合的轴承故障识别模型-CSDN博客 P…...

编程日记 2025/7/14 6:52:08

nginx-proxy-manager初次登录502 bad gateway

nginx-proxy-manager初次登录502 bad gateway 按照官方docker-compose安装后,页面如下: 默认账户密码: adminexample.com/changeme点击sign in,提示Bad Gateway 打开调试重装后依然如此,最后查阅githup issue 找到答案 https://github.com/NginxProxyManager/nginx-proxy-…...

编程日记 2025/7/10 3:15:23

棋牌项目Go的日志打印问题

棋牌项目Go的日志打印问题项目使用 go work 管理模块 github.com/spf13/viper 通过 application.yml 加载配置 $ tree . ├── README.md ├── common │ ├── application.yml │ ├── config │ │ └── config.go │ ├── go.mod │ ├── go.su…...

编程日记 2025/7/12 20:38:04

基于SpringBoot校园台球厅人员与设备管理系统设计与实现

1.1课题背景与意义在Internet高速发展的今天，计算机的应用几乎完全覆盖我们生活的各个领域，互联网在经济，生活等方面有着举足轻重的地位，成为人们资源共享，信息快速传递的重要渠道。在中国，网上管理的兴起…...

编程日记 2025/7/15 3:57:24

样品前处理工作站自动化操作

样品前处理工作站通过集成多种技术和自动化模块，实现了对样品的高效、精准处理。以下是实现自动化操作的关键步骤和原理： 1、集成多种技术：工作站通常集成了液体处理、固相萃取、离心、过滤等多种技术。这些技术的结合使得工作站能够完成从样…...

编程日记 2025/7/12 21:43:51

在 Vue 3 中实现点击按钮后禁止浏览器前进或后退

在 Vue 3 中实现点击按钮后禁止浏览器前进或后退，我们可以通过 ref 和 watch 来管理状态，同时使用 onBeforeUnmount 来清理事件监听。使用 Vue 3 实现： <template><div><button click"disableNavigation">点击…...

编程日记 2025/7/14 8:54:28

【Redis集群】使用docker compose创建docker集群，并暴露外部接口

使用 Docker Compose 创建一个 Redis 集群并暴露外部接口需要配置 docker-compose.yml 文件。以下是一个基本的步骤，包括 Redis 集群的创建和外部接口的暴露。 1、创建 docker-compose.yml 首先，您需要创建一个 docker-compose.yml 文件，配…...

编程日记 2025/7/13 7:52:07