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

跨域资源共享(CORS)问题与解决方案

跨域资源共享(CORS,Cross-Origin Resource Sharing)是现代web开发中常见且重要的一个概念。它涉及到浏览器的同源策略(Same-Origin Policy),该策略用于防止恶意网站从不同来源窃取数据。然而,在实际开发中,我们经常需要与不同源的资源进行交互,这就引发了跨域问题。本文将详细讨论跨域问题的产生原因、工作流程以及在Spring Boot后端和Axios前端环境中解决跨域问题的方法。

跨域问题的产生原因

同源策略

同源策略是浏览器的一个重要安全机制,用于防止一个网站的脚本与另一个网站的内容进行交互。两个URL被认为是同源的,必须满足以下三个条件:

  1. 协议相同(如http与https不同源)。
  2. 域名相同(如example.com与sub.example.com不同源)。
  3. 端口相同(如http://example.com:80与http://example.com:8080不同源)。

跨域问题

跨域问题产生的原因主要是因为浏览器的同源策略。浏览器限制了从一个源(Origin)加载的文档或脚本与不同源(如不同域、协议或端口)资源的交互。例如,当你的前端应用在http://localhost:3000上运行,而后端API在http://localhost:8080上提供服务时,直接从前端向后端发送请求就会触发跨域问题。

CORS 工作流程

CORS 是一种浏览器技术,它允许服务器明确地表明哪些来源可以访问它的资源。CORS 由一组 HTTP 头部字段组成,这些字段允许服务器描述哪些来源(域、协议和端口)有权限访问服务器上的资源。

简单请求与预检请求

简单请求

简单请求是指那些使用以下方法的请求:

  • GET
  • HEAD
  • POST(带有某些特定类型的Content-Type,如text/plain、multipart/form-data、application/x-www-form-urlencoded)

当浏览器发送一个简单请求时,它会在请求头中包含Origin字段,服务器根据这个字段决定是否允许请求。如果允许,服务器会在响应头中包含Access-Control-Allow-Origin字段。

示例:
前端请求:

axios.get('http://localhost:8080/api/data').then(response => console.log(response.data)).catch(error => console.error(error));

后端响应:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Content-Type: application/json{"data": "some data"
}
预检请求

对于复杂请求(如使用PUT、DELETE方法,或自定义头部字段的请求),浏览器会在实际请求之前发送一个OPTIONS请求,这就是所谓的预检请求。预检请求的目的是探测服务器是否允许实际请求。

预检请求的示例:
前端请求:

axios.post('http://localhost:8080/api/data', {data: 'some data'}, {headers: {'Custom-Header': 'value'}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

浏览器发送的预检请求:

OPTIONS /api/data HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Custom-Header

服务器响应:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Custom-Header

如果预检请求被允许,浏览器会发送实际请求。

Spring Boot中解决CORS问题

在Spring Boot中,我们可以通过多种方式配置CORS策略,允许前端的跨域请求。

使用注解配置CORS

最简单的方式是使用注解@CrossOrigin,可以直接在控制器类或方法上使用该注解。

示例:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class MyController {@CrossOrigin(origins = "http://localhost:3000")@GetMapping("/api/data")public String getData() {return "some data";}
}

全局配置CORS

如果需要在整个应用程序中统一配置CORS策略,可以通过实现WebMvcConfigurer接口来配置。

示例:

import org.springframework.context.annotation.Bean;
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 MyConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://localhost:3000").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*");}};}
}

通过过滤器配置CORS

还可以通过注册一个CORS过滤器来实现跨域配置,这种方式更灵活,可以更好地控制请求的各个方面。

示例:

import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@Component
public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {HttpServletResponse httpServletResponse = (HttpServletResponse) response;HttpServletRequest httpServletRequest = (HttpServletRequest) request;httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");if ("OPTIONS".equalsIgnoreCase(httpServletRequest.getMethod())) {httpServletResponse.setStatus(HttpServletResponse.SC_OK);} else {chain.doFilter(request, response);}}
}

Axios配置CORS请求

在前端,我们使用Axios发送HTTP请求。为了处理跨域请求,需要确保Axios正确设置请求头和凭证。

基本使用

基本的GET请求和POST请求已经在前文示例中展示。对于跨域请求,需要特别注意配置withCredentials属性,如果后端需要认证信息(如Cookie)。

示例:

axios.get('http://localhost:8080/api/data', { withCredentials: true }).then(response => console.log(response.data)).catch(error => console.error(error));

自定义请求头

如果需要发送自定义请求头,需要在Axios请求配置中添加相应的头部字段。

示例:

axios.post('http://localhost:8080/api/data', { data: 'some data' }, {headers: {'Custom-Header': 'value'},withCredentials: true
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

处理预检请求

为了确保复杂请求的预检请求能成功,需要在后端正确配置Access-Control-Allow-HeadersAccess-Control-Allow-Methods等头部字段。前端无需额外处理,浏览器会自动发送预检请求。

常见问题与解决方案

缺少CORS头部

如果后端响应中缺少必要的CORS头部,会导致浏览器拦截请求。确保服务器响应中包含Access-Control-Allow-Origin等头部字段。

凭证相关问题

对于需要凭证的请求(如使用Cookie),前端需设置withCredentials: true,后端需设置Access-Control-Allow-Credentials: true

动态CORS配置

有时需要根据请求动态配置CORS策略,可以在过滤器或控制器中编写逻辑,根据请求的来源设置相应的头部字段。

示例:

import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;@RestController
public class DynamicCorsController {@CrossOrigin@GetMapping("/api/data")public ResponseEntity<String> getData(HttpServletRequest request) {String origin = request.getHeader("Origin");HttpHeaders headers = new HttpHeaders();headers.set("Access-Control-Allow-Origin", origin);headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");return ResponseEntity.ok().headers(headers).body("some data");}
}

结论

跨域资源共享(CORS)是现代Web开发中不可避免的问题。理解跨域问题的产生原因和工作流程,对于解决跨域问题至关重要。在Spring Boot后端和Axios前端环境中,通过配置注解、全局配置或过滤器,可以

有效解决CORS问题。本文详细探讨了跨域问题的各个方面,希望能为开发者提供有价值的参考。

参考文献

  1. Mozilla Developer Network (MDN) - Cross-Origin Resource Sharing (CORS)
  2. Spring Framework Documentation - Enabling Cross-Origin Requests for a RESTful Web Service
  3. Axios Documentation - Axios

相关文章:

跨域资源共享(CORS)问题与解决方案

跨域资源共享&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;是现代web开发中常见且重要的一个概念。它涉及到浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;&#xff0c;该策略用于防止恶意网站从不同来源窃取数据。然而&#xff0c;在…...

实用软件分享-----一款免费的人工智能替换face的神器

专栏介绍:本专栏主要分享一些实用的软件(Po Jie版); 声明1:软件不保证时效性;只能保证在写本文时,该软件是可用的;不保证后续时间该软件能一直正常运行;不保证没有bug;如果软件不可用了,我知道后会第一时间在题目上注明(已失效)。介意者请勿订阅。 声明2:本专栏的…...

不可思议!这款 Python 库竟然能自动生成GUI界面:MagicGUI

目录 什么是MagicGUI&#xff1f; ​编辑 MagicGUI的工作原理 安装MagicGUI 创建你的第一个GUI ​编辑 其他案例 输入值对话框 大家好&#xff0c;今天我们来聊一聊一个非常有趣且实用的Python库——MagicGUI。这个库可以让你用最少的代码&#xff0c;快速创建图形用户…...

论文发表CN期刊《高考》是什么级别的刊物?

论文发表CN期刊《高考》是什么级别的刊物&#xff1f; 《高考》是由吉林省长春出版社主管并主办的省级教育类期刊&#xff0c;期刊以科教兴国战略为服务宗旨&#xff0c;专门反映和探索国内外教育教学和科研实践的最新成果。该期刊致力于为广大教育工作者提供一个高质量的学术…...

离散数学复习

1.关系的介绍和性质 &#xff08;1&#xff09;序偶和笛卡尔积 两个元素按照一定的顺序组成的二元组就是序偶&#xff0c;使用尖括号进行表示&#xff0c;尖括号里面的元素一般都是有顺序的&#xff1b; 笛卡尔积就是有两个集合&#xff0c;从第一个集合里面选择一个元素&am…...

华为网络设备高频命令

1.system-view • 用法&#xff1a;在用户视图下执行 system-view 命令。 • 作用&#xff1a;进入系统视图&#xff0c;以便进行配置性的操作。 • 场景&#xff1a;当需要对设备进行系统级的配置时。 2.sysname XXX • 用法&#xff1a;执行 [Huawei]sysname XXX 命令。…...

信友队:南风的收集

C. [202406C]楠枫的收集 文件操作 时间限制: 1000ms 空间限制: 262144KB 输入文件名: 202406C.in 输出文件名: 202406C.out Accepted 100 分 题目描述 一年四季&#xff0c;寒暑交替&#xff0c;楠枫总是会收集每一个季节的树叶&#xff0c;并把它们制作成标本收集起来。当…...

找工作小项目:day16-重构核心库、使用智能指针(3)

day16-重构核心库、使用智能指针&#xff08;3&#xff09; 最后将使用这个库的方式进行展示。 1、客户端 在while ((o getopt(argc, argv, optstring)) ! -1)所有的操作都是获取参数的操作&#xff0c;threads 、msgs 和wait 分别指线程数、消息长度以及等待时间。 创建一…...

软考中级|软件设计师-知识点整理

目录 计算机网络概论 计算机系统基础知识 中央处理单元 数据表示 校验码 计算机体系结构 计算机体系结构的发展 存储系统 输入/输出技术 安全性、可靠性与系统性能评测基础知识 加密技术和认证技术 计算机可靠性 程序设计语言基础知识 程序设计语言概述 程序设计…...

HTML5基础

1 HTML基础概念&#xff08;难点&#xff09; WWW&#xff08;World Wide Web&#xff0c;万维网&#xff09;是一种建立在 Internet 上的信息资源网络。 WWW 有 3 个基本组成部分&#xff0c;分别是 URL&#xff1a;Universal Resource Locators&#xff0c;统一资源定位器 HT…...

python,ipython 和 jupyter notebook 之间的关系

python&#xff0c;ipython 和 jupyter notebook 之间的关系 文章目录 python&#xff0c;ipython 和 jupyter notebook 之间的关系1. Python2. IPython3. Jupyter Notebook启动 Jupyter Notebook 关系总结 Python、IPython 和 Jupyter Notebook 是相互关联但具有不同功能的工具…...

聊聊DoIP吧(三)-端口号port

DoIP在UDP和TCP建立连接和发送诊断报文的过程中使用的端口定义如下&#xff1a;...

【将xml文件转yolov5训练数据txt标签文件】连classes.txt都可以生成

将xml文件转yolov5训练数据txt标签文件 前言一、代码解析 二、使用方法总结 前言 找遍全网&#xff0c;我觉得写得最详细的就是这个博文⇨将xml文件转yolov5训练数据txt标签文件 虽然我还是没有跑成功。那个正则表达式我不会改QWQ&#xff0c;但是不妨碍我会训练ai。 最终成功…...

针对k8s集群已经加入集群的服务器进行驱逐

例如k8s 已经有很多服务器&#xff0c;现在由于服务器资源过剩&#xff0c;需要剥离一些服务器出来 查找节点名称&#xff1a; kubectl get nodes设置为不可调度&#xff1a; kubectl cordon k8s-node13恢复可调度 kubectl uncordon k8s-node13在驱逐之前先把需要剥离驱逐的节…...

go 1.22 增强 http.ServerMux 路由能力

之前 server func main() {http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {fmt.Println("Received request:", r.URL.Path)fmt.Fprintf(w, "Hello, client! You requested: %s\n", r.URL.Path)})log.Println("Serv…...

赶紧收藏!2024 年最常见 20道设计模式面试题(二)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道设计模式面试题&#xff08;一&#xff09;-CSDN博客 三、解释抽象工厂模式&#xff0c;并给出一个实际应用的例子。 抽象工厂模式是一种创建型设计模式&#xff0c;用于创建一系列相关或依赖对象的接口&#x…...

Java面向对象设计 - Java泛型约束

Java面向对象设计 - Java泛型约束 无限通配符 通配符类型由问号表示&#xff0c;如<&#xff1f;> 。 对于通用类型&#xff0c;通配符类型是对象类型用于原始类型。 我们可以将任何已知类型的泛型分配为通配符类型。 这里是示例代码: // MyBag of String type M…...

什么是内存泄漏?如何避免内存泄漏?

**内存泄漏&#xff08;Memory Leak&#xff09;**是指在程序运行过程中&#xff0c;已经动态分配的堆内存由于某种原因程序未释放或无法释放&#xff0c;造成系统内存的浪费&#xff0c;导致程序运行速度减慢甚至系统崩溃等严重后果。内存泄漏具有隐蔽性、积累性的特征&#x…...

元组(tuple)(Python)

文章目录 一、定义二、常用操作 一、定义 tuple ("张三", "李四", "王二")二、常用操作 分类关键字/函数/方法说明查询元组[索引]根据索引取值&#xff0c;索引不存在会报错len(元组)元组长度&#xff08;元素个数&#xff09;值 in 元组&…...

【C++进阶学习】第二弹——继承(下)——挖掘继承深处的奥秘

继承&#xff08;上&#xff09;&#xff1a;【C进阶学习】第一弹——继承&#xff08;上&#xff09;——探索代码复用的乐趣-CSDN博客 前言&#xff1a; 在前面我们已经讲了继承的基础知识&#xff0c;让大家了解了一下继承是什么&#xff0c;但那些都不是重点&#xff0c;今…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...