12：CORS跨域设置-Java Spring

已于 2024-04-23 10:42:45 修改
阅读量1.7k 收藏 2
点赞数
分类专栏： Java Spring 文章标签： java spring 开发语言
于 2022-10-05 21:24:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46207024/article/details/127175128
版权

目录

12.1 CORS介绍

CORS跨域资源共享（Cross-origin resource sharing）是指在服务器端定义跨域请求规则，允许控制浏览器向跨域服务器发出请求，支持各种请求方式，解除了Ajax同源使用的限制。

目前所有浏览器都支持CORS跨域设置，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制，成为了主流的跨域解决方案。

12.2 CORS原理

CORS原理主要基于以下几点：

1. 预检请求（Preflight Request）

对于非简单请求（如使用了自定义头、PUT、DELETE等方法），浏览器在实际发送请求前，会先发送一个OPTIONS方法的预检请求到服务器，询问是否允许跨域请求。预检请求包含以下信息：

  • Origin：发起请求的源（协议、域名、端口）。
  • Access-Control-Request-Method：即将发送的实际请求方法。
  • Access-Control-Request-Headers（可选）：即将发送的自定义请求头列表。

2. 服务器响应

服务器收到预检请求后，根据请求信息和配置，通过响应头决定是否允许跨域请求：

  • Access-Control-Allow-Origin：允许的源（可以是单个源、多个源或*表示允许所有源）。
  • Access-Control-Allow-Methods（针对预检请求）：允许的方法列表。
  • Access-Control-Allow-Headers（针对预检请求）：允许的自定义头列表。
  • Access-Control-Max-Age（针对预检请求）：预检结果的有效期（秒），在此期间内后续同源、同方法、同头的请求无需再次发送预检。
  • Access-Control-Allow-Credentials：是否允许携带凭证（如Cookies、HTTP认证信息）进行跨域请求。
  • Access-Control-Expose-Headers（可选）：允许客户端访问的响应头列表。

如果服务器返回的响应头符合预期，浏览器会继续发送实际请求；否则，请求被阻止。

3. 简单请求

对于方法为GET、POST（Content-Type仅为application/x-www-form-urlencoded、multipart/form-data或text/plain）且不包含自定义头的请求，浏览器直接发送实际请求，并在请求头中添加Origin。服务器通过响应头Access-Control-Allow-Origin等决定是否允许此次跨域请求。

12.3 CORS请求方式

CORS通过额外的HTTP头部信息，浏览器将Ajax请求分为普通请求和特殊请求

普通请求

请求方法

  • GET
  • HEAD
  • POST（Content-Type只限于application/x-www-form-urlencoded、multipart/form-data、text/plain）

HTTP的头信息

  • Accept
  • Accept-Language
  • Content-Language
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-Type

特殊请求

请求方法

  • PUT
  • DELETE
  • TRACE
  • PATCH
  • POST（Content-Type值只限于application/json）

HTTP的头信息

  • 自定义

12.4 CORS实现设置

CORS实现主要涉及服务器端的配置与客户端的请求设置：

服务器端配置

以常见的Web服务器为例，配置CORS支持：

  • Nginx：在location块或server块中添加如下指令：
  add_header 'Access-Control-Allow-Origin' '*'; # 或具体的允许源
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';
  add_header 'Access-Control-Allow-Credentials' 'true'; # 如果需要携带凭证
  • Apache：在.htaccess或httpd.conf中添加如下规则：
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
  Header set Access-Control-Allow-Credentials "true"
  • Node.js（Express）：使用中间件如cors包：
  const cors = require('cors');
  app.use(cors({
    origin: '*', // 或['http://example.com', 'https://another-site.com'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
    credentials: true,
  }));
  • 其他服务器框架：参照各自文档，设置响应头以支持CORS。

客户端请求设置

对于需要携带凭证的跨域请求：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.withCredentials = true; // 允许携带凭证
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

或者使用Fetch API：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
  credentials: 'include', // 允许携带凭证
});

12.5 CORS实现流程

SpringBoot设置CORS的的本质是通过设置浏览器响应头信息，浏览器使用OPTIONS方法发送预检请求，获知服务器是否允许该跨域请求，如果不允许发送带数据的真实请求，则会受到限制

普通请求

普通请求头中携带Origin字段，用于说明当前请求的协议、域名和端口，服务器根据这个值决定是否同意这次请求

  • Access-Control-Allow-Origin 服务端请求域设置
  • Access-Control-Allow-Credentials Cookie请求设置
  • Access-Control-Request-Headers 额外发送的请求头字段信息

XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段，想拿到额外的字段必须在Headers头字段里指定

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

1.浏览器正常请求

浏览器直接发出CORS请求，在头信息之中增加Origin、Access字段

GET /cors HTTP/1.1
Origin: http://www.xxx.com
Host: xxx.xxxx.com
Accept-Language: en-US  
Connection: keep-alive  
User-Agent: Mozilla/5.0...

2.服务端对请求的肯定回应

服务器收到请求以后，检查Origin、Access字段是否许可范围内，如果不在，服务器返回一个HTTP响应，如果在，服务器返回肯定响应

Access-Control-Allow-Origin: http://www.xxx.com
Access-Control-Allow-Methods: GET
Content-Type: text/html; charset=utf-8

特殊请求

特殊会在正式通信之前，增加一次HTTP预检请求（Preflight）

在这里插入图片描述

  • Access-Control-Allow-Origin 服务端请求域设置
  • Access-Control-Allow-Credentials Cookie请求设置
  • Access-Control-Request-Headers 额外发送的请求头字段信息
  • Access-Control-Max-Age 用来指定本次预检请求的有效期，单位为秒

1.浏览器预检请求

预检请求是指浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的HTTPRequest请求，否则就报错

OPTIONS /cors HTTP/1.1
Origin: http://www.xxx.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Header
Host: xxx.xxxx.com			
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

2.服务端对预检请求的肯定响应

服务器收到预检请求以后，检查了Origin、Access头字段以后，确认允许跨域请求，做出响应

HTTP/1.1 200 OK
Date: 
Server: 
Access-Control-Allow-Origin: http://www.xxx.com
Access-Control-Allow-Methods: GET, POST, PUT  
Access-Control-Allow-Headers: Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

3.浏览器正常请求

服务器通过了预检请求，以后每次浏览器正常的CORS请求和服务器的响应，都会有一个Origin、Access头信息字段

PUT /cors HTTP/1.1
Origin: http://www.xxx.com
Host: xxx.xxxx.com
Header: value  
Accept-Language: en-US  
Connection: keep-alive  
User-Agent: Mozilla/5.0...

4.服务器响应数据

Access-Control-Allow-Origin: http://www.xxx.com
Content-Type: text/html; charset=utf-8
Yeats_Liao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2小时学会电商订单提交CORS跨域解决方法
06-18
       本课程全程使用目前比较流行的开发工具idea进行开发,涉及到目前互联网项目中最常用的高并发解决方案技术, 如  dubbo,redis,solr,freemarker,activeMQ,springBoot框架,微信支付,nginx负载均衡,电商活动秒杀,springSecurity安全框架,FastDFS分布式文件服务器,还会涉及到代码生成器,   前台的技术有angularJS和BootStrap框架,此课程内容丰富实战性强,如果你还是传统项目的开发人员,那你学完本课程会有很大的收获,让你的薪资上涨,5K以上,让你完全感受到了互联网思维带来的高并发解决方案的思路,如果你是开发的小白,建议你学完Spring,SpringMVC,MyBatis框架后再来学习本门课程,学完以后会让你完全体验到企业级开发的流程. 在职开发人员学完后会让你的薪资更高,让你更了解互联网是如何解决高并发 学完SSM框架的同学就可以学习,能让你切身感受到企业级开发环境目标1：掌握跨域请求CORS解决方案目标2：完成结算页收货人地址选择功能目标3：完成结算页支付方式选择目标4：完成结算页商品清单功能
（六）CorsConfig前后端数据跨域连接---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-19 4916
本次任务，我们来到激动人心的时刻，实现前后端跨域连接，把我们查询到的数据在前端进行展示，并且实现分页查询功能。
Nginx 如何在配置文件中实现CORS
代码说，代码让世界更美好。
03-18 1095
Nginx 如何在配置文件中实现CORS
cors-filter-1.7.jar spring解决跨域问题 java
04-20
spring解决跨域问题(两种方式，配有文档) cors-filter-1.7.jar java-property-utils-1.9.1.jar
SpringRESTDemo:Spring MVC + REST + Spring Data JPA + Hibernate
06-27
SpringRESTDemo Spring MVC + REST + Spring Data JPA + Hibernate 为跨域资源共享（CORS）添加了CORSFilter，从其他服务器访问Service Server。 添加了对 JSON + XML 的响应支持，根据请求类型和接受标头值。
cors-spring-boot-starter:CORS跨域与Spring Boot集成
04-30
CORS与Spring Boot集成 使用方法 支持 Spring Boot 2 以上 添加依赖 compile group: "com.windhc", name: "cors-spring-boot-starter", version: "1.1.0" 配置 # 必选。启用cors，值是一个布尔值 cors.enabled= # 可选。设置允许跨域的接口地址，/**代表所有地址，默认/** cors.path-pattern= # 可选。"*"，表示接受任意域名的请求, 默认是"*" cors.allowed-origins= # 可选。(重要)设置允许跨域的请求方式，例如:GET,POST,PUT等，多个以逗号分隔，"*"代表允许所有的请求方法，默认：GET,HEAD,POST cors.allowed-methods= # 可选。配置Access-Control-Allow-Hea
跨域及cors解决跨域
weixin_50769390的博客
11-17 1644
跨域问题及Springboot处理cors跨域
SpringBoot跨域设置（CORS）
热门推荐
骑个小蜗牛的博客
03-23 4万+
目录什么是跨域跨域资源共享（CORS）1. 简单请求2. 非简单请求SpringBoot设置CORS1. 配置过滤器CorsFilter2. 实现接口WebMvcConfigurer3. 使用注解@CrossOrigin 什么是跨域 请求url的协议、域名、端口三者有任意一个不同即为跨域。跨域问题是因为浏览器的同源策略的限制而产生的。 同源：请求url的协议、域名、端口三者都相同即为同源（同一个域）。 同源策略：同源策略（Sameoriginpolicy）是一种约定，他是浏览器最核心也最基本的安全
【Java】Java中解决跨域问题的几种方法（建议收藏）
DreamSun的博客
07-18 1万+
定义跨域（CORS）是指不同域名之间相互访问。跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略所造成的，是浏览器对于JavaScript所定义的安全限制策略。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。原因在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以…跨域问题出现。
java解决CORS跨域问题【总结】
wayne_youlu的博客
12-01 1582
*** 跨域过滤器* @return/** 允许任何域名使用 */ // corsConfiguration.addAllowedOrigin("*");/** 允许的请求头 */ corsConfiguration . addAllowedHeader("*");/** 允许的方法 */ corsConfiguration . addAllowedMethod("*");} }/*** 跨域过滤器* @return。
【CORS】前端、后端 跨域配置
酷奇的博客
04-18 1126
在这里强烈建议每个人通读一下 MDN 的HTTP访问控制HTTP 访问控制 ，这篇图文并茂的文章可以解决跨域百分之八十的疑惑。
springboot-util:Spring Boot 项目工具类，框架集成记录
05-13
springboot-study springboot 使用 SpringBoot + MyBatis 搭建的微信小程序。areadisplay 中包含了小程序所需要的代码，t_area.sql 是数据库导出的结构文件，src 目录下为主要的后端代码。 包括了一些配置信息与基本的增删改查代码，刚入门的同学可以参考这个 demo。 springboot-chart 柱状图、条形图、饼图数据的简单封装。在做一些报表统计时如果涉及到图表，可以参考这个 demo。 参考 的开源代码，修改了一部分，方便以后用到项目中去。 效果图 springboot-cors Spring Boot 结合 CORS 在服务端解决 AJAX 跨域问题的 demo。 1.使用 CorsConfiguration 配置 @Configuration public class CorsConfig { pr
cors基础，响应头设置
qq_57057576的博客
08-09 2231
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS，该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。CORS 需要浏览器和后端同时支持，浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端，只要后端实现了 CORS，就实现了跨域。（与cors相关的响应头，都是以 access-control-allow开头的响应头）根据 请求头和请求方式 的不同，cors请求分为 简单请求和预检请求。...
node.js设置允许跨域访问
qq_45279180的博客
03-17 3374
设置ajax的跨域请求 解决跨域的方式有很多，本次解决跨域的方案是跨域资源共享（CORS）这里我们以node.js为例设置允许跨域请求。 因为我使用node.js主要使用的是express框架，所以这里也以express框架为例。 // 配置跨域请求中间件(服务端允许跨域请求) app.use((req, res, next)=> { res.header("Access-Control-Allow-Origin", req.headers.origin); // 设置允许来自哪里的跨域请
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested
LIUXIAOYIN_CAIJI的博客
11-20 1370
解决方法 直接复制就ok了 @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfig= new CorsConfiguration(); corsConfig.addAllowedOrigin(...
解决跨域(CORS)问题
Java技术攻略的博客
03-07 1661
CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。
CORS 跨域解决方案
running_pork的博客
01-04 1909
复杂请求则需要2次，先发起options请求，确认目标资源是否支持跨域，浏览器会根据服务端响应的header自动处理剩余的请求，如果响应支持跨域，则继续发出正常请求；简单跨域请求只需要请求一次，复杂跨域请求需要请求2次，第一次是预检请求（options请求），第二次是真是的跨域请求。所以，当触发预检时，跨域请求便会发送2次请求，增加请求次数，同时，也延迟了请求真正发起的时间，会严重地影响性能。crossDomain: true //// 会让请求头中包含跨域的额外信息，但不会含cookie。
解决CORS跨域问题(1)，2024年最新企业级项目实战讲解
最新发布
2301_77116622的博客
04-16 380
CORS跨域问题，是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
前端跨域解决方案之CORS详解
m0_51945510的博客
04-21 5109
前端跨域解决方案之CORS详解has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
java cors跨域怎么解决
05-26
在后端Java代码中，可以通过设置响应头来允许跨域请求。例如，可以设置Access-Control-Allow-Origin响应头来指定允许的请求来源，如下所示： ```java response.setHeader("Access-Control-Allow-Origin", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yeats_Liao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值