跨域资源共享（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-Headers和Access-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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Web前端与软件测试：探索技术与质量的双重世界

Web前端与软件测试：探索技术与质量的双重世界

Web前端与软件测试&#xff1a;探索技术与质量的双重世界 在数字化时代的浪潮中&#xff0c;Web前端技术和软件测试扮演着举足轻重的角色。它们犹如一对默契的舞者&#xff0c;在技术的舞台上共同演绎着精彩绝伦的舞蹈。本文将从四个方面、五个方面、六个方面和七个方面&#…
阅读更多...
Java实现Mysql批量插入与更新

Java实现Mysql批量插入与更新

第一、批量插入语句 Insert({"<script>","INSERT INTO TABLE_NAME (" "ID," "IS_DELETE," "GMT_CREATE," "GMT_MODIFIED" ")VALUES","<foreach collection list item item separator …
阅读更多...
docker容器基本原理简介

docker容器基本原理简介

一、docker容器实例运行的在linux上是一个进程 1&#xff09;、我们通过docker run 通过镜像运行启动的在linux上其实是一个进程&#xff0c;例如我们通过命令运行一个redis&#xff1a; docker run -d --name myredis redis2&#xff09;、可以看到首先我们本地还没有redis镜…
阅读更多...
【LeetCode最详尽解答】11-盛最多水的容器 Container-With-Most-Water

【LeetCode最详尽解答】11-盛最多水的容器 Container-With-Most-Water

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家&#xff01; 链接&#xff1a; 11-盛最多水的容器 直觉 这个问题可以通过可视化图表来理解和解决。 通过图形化这个…
阅读更多...
「动态规划」如何求乘积最大子数组？

「动态规划」如何求乘积最大子数组？

152. 乘积最大子数组https://leetcode.cn/problems/maximum-product-subarray/description/ 给你一个整数数组nums&#xff0c;请你找出数组中乘积最大的非空连续子数组&#xff08;该子数组中至少包含一个数字&#xff09;&#xff0c;并返回该子数组所对应的乘积。测试用例的…
阅读更多...
【数据结构】初识集合深入剖析顺序表（Arraylist）

【数据结构】初识集合深入剖析顺序表（Arraylist）

【数据结构】初识集合&深入剖析顺序表&#xff08;Arraylist&#xff09; 集合体系结构集合的遍历迭代器增强for遍历lambda表达式 List接口中的增删查改List的5种遍历ArrayList详解ArrayList的创建ArrayList的增删查改ArrayList的遍历ArrayList的底层原理 &#x1f680;所属…
阅读更多...
【全栈实战】大模型自学：从入门到实战打怪升级，20W字总结（一）

【全栈实战】大模型自学：从入门到实战打怪升级，20W字总结（一）

&#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本栏讲解【全栈实战】大模型自学&#xff1a;从入门到实战打怪升级。 &#x1f514;专栏持续更新&#xff0c;适合人群&#xff1a;本科生、研究生、大模型爱好者&#xff0c;期…
阅读更多...
JVM-GC-什么是垃圾

JVM-GC-什么是垃圾

JVM-GC-什么是垃圾 前言 所谓垃圾其实是指&#xff0c;内存中没用的数据&#xff1b;没有任何引用指向这块内存&#xff0c;或者没有任何指针指向这块内存。没有的数据应该被清除&#xff0c;垃圾的处理其实是内存管理问题。 JVM虽然不直接遵循冯诺依曼计算机体系架构&#…
阅读更多...
基于flask的网站如何使用https加密通信-问题记录

基于flask的网站如何使用https加密通信-问题记录

文章目录 项目场景&#xff1a;问题1问题描述原因分析解决步骤解决方案 问题2问题描述原因分析解决方案 参考文章 项目场景&#xff1a; 项目场景&#xff1a;基于flask的网站使用https加密通信一文中遇到的问题记录 问题1 问题描述 使用下面的命令生成自签名的SSL/TLS证书和…
阅读更多...
Docker镜像技术剖析

Docker镜像技术剖析

目录 1、概述1.1 什么是镜像&#xff1f;1.2 联合文件系统UnionFS1.3 bootfs和rootfs1.4 镜像结构1.5 镜像的主要技术特点1.5.1 镜像分层技术1.5.2 写时复制(copy-on-write)策略1.5.3 内容寻址存储(content-addressable storage)机制1.5.4 联合挂载(union mount)技术 2.机制原理…
阅读更多...
用PHP来调用API给自己定制一个“每日新闻”

用PHP来调用API给自己定制一个“每日新闻”

头条新闻汇聚了互联网上的时事动态&#xff0c;提供最新新闻动态、网络热门话题和视频更新等&#xff0c;覆盖社会、政治、体育、经济、娱乐、科技等多个领域&#xff0c;并不断刷新内容。企业应用这一接口后&#xff0c;可以快速吸引更多的用户访问自己的平台。即使是非新闻类…
阅读更多...
面向对象的三大特性与类图

面向对象的三大特性与类图

1. 面向对象编程的三大特点 Object-oriented programming (OOP) is a paradigm centered around the concept of objects, which can contain data and code to manipulate that data. The three major characteristics of object-oriented programming are encapsulation, in…
阅读更多...
天童美语：为了得体退出的那一天，你一定要好好爱孩子

天童美语：为了得体退出的那一天，你一定要好好爱孩子

父母最大的成就就是孩子可以独立&#xff0c;自己完成自己的人生。为了得体退出的那一天&#xff0c;你一定要好好爱你的小孩&#xff0c;因为每一天都在过去。当我们站在孩子成长的十字路口&#xff0c;面对那个终将到来的退出时刻&#xff0c;心中总会涌起一股难以言表的情感…
阅读更多...
有趣的傅里叶变换与小波变换对比（Python）

有趣的傅里叶变换与小波变换对比（Python）

不严谨的说&#xff0c;时域和频域分析就是在不同的空间看待问题的&#xff0c;不同空间所对应的原子(基函数)是不同的。你想一下时域空间的基函数是什么&#xff1f;频域空间的基函数是什么&#xff1f;一般的时-频联合域空间的基函数是什么&#xff1f;小波域空间的基函数是什…
阅读更多...
摄影师在人工智能竞赛中与机器较量并获胜

摄影师在人工智能竞赛中与机器较量并获胜

摄影师在人工智能竞赛中与机器较量并获胜 自从生成式人工智能出现以来&#xff0c;由来已久的人机大战显然呈现出一边倒的态势。但是有一位摄影师&#xff0c;一心想证明用人眼拍摄的照片是有道理的&#xff0c;他向算法驱动的竞争对手发起了挑战&#xff0c;并取得了胜利。 迈…
阅读更多...
课时157：脚本发布_简单脚本_功能函数

课时157：脚本发布_简单脚本_功能函数

2.1.3 功能函数 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 简介 需求&#xff1a;三条命令其实是一个组合&#xff0c;实现的是一个功能简单实践 实践 查看脚本内容 #!/bin/bash # 功能&#xff1a;打包代码 # 版本: v0.3 #…
阅读更多...
代码随想录第29天|贪心算法part3

代码随想录第29天|贪心算法part3

134.加油站 首先如果总油量减去总消耗大于等于零那么一定可以跑完一圈 每个加油站的剩余量rest[i]为gas[i] - cost[i] 从0开始累加rest[i]&#xff0c;和记为curSum&#xff0c;一旦curSum小于零&#xff0c;说明[0, i]区间都不能作为起始位置 因为我们一直维护的是一个剩余量大…
阅读更多...
HCIA11 网络安全之本地 AAA 配置实验

HCIA11 网络安全之本地 AAA 配置实验

AAA 提供 Authentication&#xff08;认证&#xff09;、Authorization&#xff08;授权&#xff09;和 Accounting&#xff08;计费&#xff09;三种安全功能。 • 认证&#xff1a;验证用户是否可以获得网络访问权。 • 授权&#xff1a;授权用户可以使用哪些服务。 •…
阅读更多...
机器学习中的监督学习介绍

机器学习中的监督学习介绍

In this post well go into the concept of supervised learning, the requirements for machines to learn, and the process of learning and enhancing prediction accuracy. 在这篇文章中&#xff0c;我们将深入探讨监督学习的概念、机器学习的要求以及学习和提高预测准确…
阅读更多...
Kotlin 协程:从基础概念到开发实践

Kotlin 协程:从基础概念到开发实践

前言 上一篇文章 深入理解Android多线程开发：场景应用与解决方案解析 针对Android开发中的多线程应用场景和相应的解决方案做了一个梳理。 总结出了Android开发中多线程编程的几个重要点： 资源复用和优化切线程任务编排并结合示例说明了Kotlin协程在处理上述问题时的优势。 …
阅读更多...
最新文章

Copyright @ 2022~2023