跨域的解决方式(java后端)

文章目录

  • 一、跨域介绍
    • 1、什么是跨域
    • 2、为什么会产生跨域
    • 3、禁止跨域的原因
  • 二、简单请求和非简单请求
    • 1、简单请求
      • 1.1、什么时简单请求
      • 1.2、简单请求基础流程
    • 2、非简单请求
      • 2.1、预检请求
      • 2.2、预检请求的回应
      • 2.3、浏览器的正常请求和回应
    • 3、自定义跨域过滤器
  • 三、解决方式
    • 1、@CrossOrigin注解
    • 2、CorsRegistry方式
    • 3、CorsFilter过滤器
      • 3.1、源码解析
    • 4、CorsWebFilter网关WebFlux过滤器

一、跨域介绍

1、什么是跨域

  • 同源策略(Sameoriginpolicy)是浏览器最核心也最基本的安全功能
  • 一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击
  • 所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号

2、为什么会产生跨域

  • 前后端分离模式下,客户端请求前端服务器获取视图资源
  • 客户端向后端服务器获取数据资源
  • 前端服务器的协议,IP和端口和后端服务器不一样,就产生了跨域

在这里插入图片描述

3、禁止跨域的原因

在这里插入图片描述

二、简单请求和非简单请求

  • CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)
  • 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
  • 浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)

1、简单请求

1.1、什么时简单请求

只要同时满足以下两大条件,就属于简单请求

  • 请求方法是以下三种方法之一
    • HEAD
    • GET
    • POST
  • HTTP的头信息不超出以下几种字段
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限制三个值
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

结合日常开发总结一句话:一般get请求就是简单请求,带json请求体的post请求就是非简单请求

1.2、简单请求基础流程

  • 浏览器发现这次跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin字段
  • Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求

举例

  • HTTP请求的方法是GET,响应response添加自定义头信息X-Name
  • 下面是这个请求的HTTP头信息

在这里插入图片描述

  • 如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应
    • 浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文)
    • 从而抛出一个错误,但是这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200

在这里插入图片描述

  • 如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段
    • 有四个与CORS请求相关的字段,都以Access-Control-开头

在这里插入图片描述

  1. Access-Control-Allow-Origin
    • 该字段是必须的
    • 要么是请求时Origin字段的值
    • 要么是一个*,表示接受任意域名的请求
  2. Access-Control-Allow-Credentials
    • 该字段可选
    • 它的值是一个布尔值,表示是否允许发送Cookie
    • 默认情况下,Cookie不包括在CORS请求之中
    • 设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器
    • 另外一方面,前端AJAX请求必须设置withCredentials = true
    • 注意:如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名
  3. Access-Control-Expose-Headers
    • 该字段可选
    • CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
    • 前端响应如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定

简单请求响应跨域设置

前端
在这里插入图片描述
后端
在这里插入图片描述

2、非简单请求

2.1、预检请求

  • 非简单请求是那种对服务器有特殊要求的请求
    • 比如请求方法是PUT或DELETE
    • 或者Content-Type字段的类型是application/json
  • 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求
    • 浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段
    • 只有得到肯定答复,浏览器才会发出正式的请求,否则就报错

举例

  • HTTP请求的方法是POST,携带json请求体并添加自定义头信息X-Data
  • 下面是这个"预检"请求的HTTP头信息

在这里插入图片描述

  • "预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源
  • Access-Control-Request-Method
    • 该字段是必须的
    • 用来列出浏览器的CORS请求会用到哪些HTTP方法
  • Access-Control-Request-Headers
    • 该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段

2.2、预检请求的回应

  • 如果服务器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段
    • 浏览器就会认定,服务器不同意预检请求
    • 控制台会打印出如下的报错信息

在这里插入图片描述

  • 如果服务器收到"预检"请求以后,检查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应

在这里插入图片描述

  • 关键的还是Access-Control-Allow-Origin字段
    • 表示http://localhost:8081可以请求数据
    • 该字段也可以设为星号,表示同意任意跨源请求
  • Access-Control-Allow-Methods
    • 该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法
    • 注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求
  • Access-Control-Max-Age
    • 该字段可选,用来指定本次预检请求的有效期,单位为秒
    • 在此期间,不用发出另一条预检请求
  • Access-Control-Allow-Headers
    • 该字段可选,默认情况只有几个固定请求头可以发送
    • 如果前端需要发送其他请求头,就必须在Access-Control-Allow-Headers里面指定

2.3、浏览器的正常请求和回应

  • 一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段
  • 服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段

"预检"请求之后,浏览器的正常CORS请求

  • 头信息的Origin字段是浏览器自动添加的

在这里插入图片描述

服务器正常的回应

  • Access-Control-Allow-Origin字段是每次回应都必定包含的

在这里插入图片描述

非简单请求响应跨域设置

前端

在这里插入图片描述

后端
在这里插入图片描述

3、自定义跨域过滤器

@Component
public class CrosFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request =(HttpServletRequest) servletRequest;response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "*");/*** 如果设置Access-Control-Allow-Credentials,允许跨域请求携带cookie* 那么Access-Control-Allow-Origin不能为*,只能为指定的域名*/// response.setHeader("Access-Control-Allow-Credentials", "true");// 非预检请求,放行即可,预检请求,则到此结束,不需要放行if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) {filterChain.doFilter(servletRequest, servletResponse);}}
}

三、解决方式

1、@CrossOrigin注解

@CrossOrigin源码

  • @CrossOrigin可以用在被RequestMapping修饰的方法Controller类上
  • 添加此注解即可实现跨域请求
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {@AliasFor("origins")String[] value() default {};@AliasFor("value")String[] origins() default {};/*** @since 5.3*/String[] originPatterns() default {};String[] allowedHeaders() default {};String[] exposedHeaders() default {};RequestMethod[] methods() default {};String allowCredentials() default "";long maxAge() default -1;
}

@CrossOrigin属性介绍

  • origins和value
    • 支持的源,origins和value都是相同的配置,互为别名,默认配置是“*”
    • 表示服务器支持所有源的跨域请求,安全信息较低
    • 最好根据实际情况设置对应的信息(协议 + 域名 + 端口)
  • originPatterns
    • 同样表示支持的源,Spring 5.3 引入的属性,默认为空
    • 与origins二选一,该字段为list,也就是可以配置多个
  • allowedHeaders
    • 允许跨域的请求头信息,默认为“*”表示允许所有的请求头
    • 默认前端可以发送的请求头:Cache-Control、Content-Language、Expires、Last-Modified、Pragma
  • exposedHeaders
    • 服务器允许客户端获取的响应头,默认为空
    • 默认前端可以获取的响应头:Cache-Control、Content-Language、Expires、Last-Modified、Pragm
  • methods
    • 服务器允许的Http Request类型,默认是允许GET、POST、HEAD
  • allowCredentials
    • 浏览器是否需要把凭证(如:cookies、CSRF tokens)发送到服务器,默认是关闭的
    • 该选项开启后会与配置的源建立高度信任的关系,并且还会暴露一些敏感信息,所以开启该选项时origin不允许设置为“*”
  • maxAge
    • “预检”结果的缓存时间,单位是秒
    • 默认1800s,在缓存时间内同一请求不需要“预检”请求

@CrossOrigin注解比较适用于较细粒度的跨域控制

2、CorsRegistry方式

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie// .allowCredentials(true)//放行哪些原始域.allowedOrigins("*").allowedMethods("*").allowedHeaders("*").exposedHeaders("*");}
}

3、CorsFilter过滤器

  • 如果设置Access-Control-Allow-Credentials为true,允许跨域请求携带cookie
  • 但是Access-Control-Allow-Origin不能为*,只能为指定的域名
@Configuration
public class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {// 1. 添加 CORS配置信息CorsConfiguration config = new CorsConfiguration();// 放行哪些原始域config.addAllowedOrigin("*");// 是否发送 Cookie// config.setAllowCredentials(true);// 放行哪些请求方式config.addAllowedMethod("*");// 放行哪些原始请求头部信息config.addAllowedHeader("*");// 暴露哪些头部信息config.addExposedHeader("*");// 2. 添加映射路径UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**", config);// 3. 返回新的CorsFilterreturn new CorsFilter(corsConfigurationSource);}
}

3.1、源码解析

CorsFilter过滤器

在这里插入图片描述

DefaultCorsProcessor

在这里插入图片描述

DefaultCorsProcessor类的handleInternal方法

protected boolean handleInternal(ServerHttpRequest request, ServerHttpResponse response,CorsConfiguration config, boolean preFlightRequest) throws IOException {String requestOrigin = request.getHeaders().getOrigin();// 从配置类CorsConfiguration获取允许的域名String allowOrigin = checkOrigin(config, requestOrigin);HttpHeaders responseHeaders = response.getHeaders();if (allowOrigin == null) {logger.debug("Reject: '" + requestOrigin + "' origin is not allowed");rejectRequest(response);return false;}// 获取请求的请求方法HttpMethod requestMethod = getMethodToUse(request, preFlightRequest);// 从配置类CorsConfiguration获取允许的请求方法List<HttpMethod> allowMethods = checkMethods(config, requestMethod);if (allowMethods == null) {logger.debug("Reject: HTTP '" + requestMethod + "' is not allowed");rejectRequest(response);return false;}// 获取请求头List<String> requestHeaders = getHeadersToUse(request, preFlightRequest);// 从配置类CorsConfiguration获取允许的请求头 List<String> allowHeaders = checkHeaders(config, requestHeaders);if (preFlightRequest && allowHeaders == null) {logger.debug("Reject: headers '" + requestHeaders + "' are not allowed");rejectRequest(response);return false;}// 设置响应允许域名responseHeaders.setAccessControlAllowOrigin(allowOrigin);// 如果是预检请求,设置允许请求方法if (preFlightRequest) {responseHeaders.setAccessControlAllowMethods(allowMethods);}// 设置允许请求头if (preFlightRequest && !allowHeaders.isEmpty()) {responseHeaders.setAccessControlAllowHeaders(allowHeaders);}// 设置允许响应头if (!CollectionUtils.isEmpty(config.getExposedHeaders())) {responseHeaders.setAccessControlExposeHeaders(config.getExposedHeaders());}// 设置是否允许请求携带cookieif (Boolean.TRUE.equals(config.getAllowCredentials())) {responseHeaders.setAccessControlAllowCredentials(true);}// 设置预检到期时间if (preFlightRequest && config.getMaxAge() != null) {responseHeaders.setAccessControlMaxAge(config.getMaxAge());}response.flush();return true;
}
  • allowedOrigin:允许域名无论什么情况都会返回
  • 只有预检请求,才有可能设置允许请求方法,请求头,响应头
  • 是否允许携带cookie和到期时间,有则返回

CorsRegistry原理

  • CorsRegistry方式最终也是通过DefaultCorsProcessor类实现
  • 与CorsFilter不同的地方
    • CorsFilter直接将属性添加到CorsConfiguration配置类
    • CorsRegistry则是通过CorsRegistration类set到CorsConfiguration配置类

4、CorsWebFilter网关WebFlux过滤器

  • reactor下的类,非mvc
@Configuration
public class CorsConfigure {@Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*");config.addAllowedMethod("*");config.addAllowedHeader("*");config.setAllowCredentials(true);UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(new PathPatternParser());configSource.registerCorsConfiguration("/**", config);return new CorsWebFilter(configSource);}
}

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

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

相关文章

【C++】模板

这篇博客来说一下模板&#xff0c;模板有函数模板和类模板&#xff0c;先来看函数模板&#xff0c;你一听模板这个词就是提前给好一个模具&#xff0c;等我们用的时候在去套用 比如说&#xff1a;我们在实际应用中常常用到swap这个交换函数&#xff0c;但是呢&#xff0c;我们要…

大模型应用_FastGPT

1 功能 整体功能&#xff0c;想解决什么问题 官方说明&#xff1a;FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01;个人体会…

配置Nginx解决跨域问题

Nginx 中将前端请求中的所有以 “/apiUrl” 开头的路径代理到 http://192.12.200.101:9813 例如&#xff1a; /apiUrl/login > http://192.12.200.101:9813/login 配置nginx环境 进入Nginx 的配置文件编辑界面: sudo nano /etc/nginx/conf.d/default.conf开始编辑 defaul…

C# WPF上位机开发(动态添加控件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 写图形界面软件的时候&#xff0c;我们经常会遇到一种情况。那就是图形界面上面&#xff0c;显示的控件可能是不定的。有可能多&#xff0c;也有可…

PyTorch官网demo解读——第一个神经网络(2)

上一篇&#xff1a;PyTorch官网demo解读——第一个神经网络&#xff08;1&#xff09; 继上一篇文章我们展示了第一个神经网络的完整代码&#xff0c;今天我们来聊聊这个神经网络的模型设计。 这个demo实际上只使用了一个简单的线性模型&#xff1a;y wx b&#xff1b; 手写…

软件测试用例经典方法 | 单元测试法案例

单元测试又称模块测试&#xff0c;是对软件设计的最小单元的功能、性能、接口和设计约束等的正确性进行检验&#xff0c;检查程序在语法、格式和逻辑上的错误&#xff0c;并验证程序是否符合规范&#xff0c;以发现单元内部可能存在的各种缺陷。 单元测试的对象是软件设计的最…

微信小程序背景图片设置

问题 :微信小程序通过css:background-image引入背景图片失败 [渲染层网络层错误] pages/wode/wode.wxss 中的本地资源图片无法通过 WXSS 获取&#xff0c;可以使用网络图片&#xff0c;或者 base64&#xff0c;或者使用<image/>标签 解决方法微信小程序在使用backgroun…

HPM6750系列--第十篇 时钟系统

一、目的 上一篇中《HPM6750系列--第九篇 GPIO详解&#xff08;基本操作&#xff09;》我们讲解了HPM6750 GPIO相关内容&#xff0c;在进一步讲解其他外设功能之前我们有必要先讲解一下HPM6750的时钟系统。 时钟可以说是微控制器系统中的心脏&#xff0c;片上外设模块必须依赖时…

如何用Adobe Audition 检测波形的pop和卡顿

在Adobe Audition中&#xff0c;检测卡顿和pop的方法各有不同&#xff1a; 1. **检测卡顿**&#xff1a; - 使用“诊断”面板中的“删除静音”或“标记音频”选项可以帮助识别音频中的静音段落&#xff0c;这可能表明存在卡顿。 - 配置诊断设置&#xff0c;指定静音的振…

Linux中使用podman管理容器

本章主要介绍使用podman管理容器 了解什么是容器&#xff0c;容器和镜像的关系安装和配置podman拉取和删除镜像给镜像打标签导出和导入镜像创建和删除镜像数据卷的使用管理容器的命令使用普通用户管理容器 对于初学者来说&#xff0c;不太容易理解什么是容器&#xff0c;这里…

qt实现基本文件操作

先通过ui界面实现基本框架 接下来就要实现每个按键的功能了 我们先来实现新建的的功能&#xff0c;我们右键新建键&#xff0c;可以发现没有转到槽的功能&#xff0c;因此我们要自己写connect来建立关系。 private slots:void newActionSlot(); 在.h文件中加上槽函数。 conne…

DHTMLX Suite v8.3发布!深化JavaScript UI小部件库使用体验

DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件&#xff0c;这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Suite v8.3已于近日正式发布啦&#xff01;这个更新附带了一组新特性和改进&#xff0c;旨在促进您…

产品入门第五讲:Axure交互和情境

目录 一.Axure交互和情境的介绍 1.交互介绍 概念 常见的Axure交互设计技巧 2.情境介绍 概念 常见的Axure情境设计技巧&#xff1a; 二.实例展示 1.ERP登录页到主页的跳转 2.ERP的菜单跳转到各个页面 &#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个…

2024最新FL Studio21.2MAC电脑版中文版下载安装步骤教程

FL Studio 简称FL&#xff0c;全称Fruity Loops Studio&#xff0c;因此国人习惯叫它"水果"。目前最新版本是FL Studio21.1.1.3750版本&#xff0c;它让你的计算机就像是全功能的录音室&#xff0c;大混音盘&#xff0c;非常先进的制作工具&#xff0c;让你的音乐突破…

基于网络爬虫技术的网络新闻分析

目录 前言 一、网络爬虫技术 二、代理IP 三、网络新闻分析 总结&#xff1a; 前言 随着互联网的发展和普及&#xff0c;网络新闻成为人们获取信息的重要途径。然而&#xff0c;由于网络新闻的数量庞大&#xff0c;分析和处理这些新闻变得愈发困难。本文将介绍如何使用网络…

TestSSLServer4.exe工具使用方法简单介绍(查SSL的加密版本SSL3或是TLS1.2)

一、工具使用方法介绍 工具使用方法参照&#xff1a;http://www.bolet.org/TestSSLServer/ 全篇英文看不懂&#xff0c;翻译了下&#xff0c;能用到的简单介绍如下&#xff1a; 将下载的TestSSLServer4.exe工具放到桌面上&#xff0c;CMD命令行进入到桌面目录&#xff0c;执…

如何免费搭建私人电影网站(一)

前言&#xff1a;在线看电影经常会出现烦人的广告&#xff0c;为了不浪费时间看广告&#xff0c;有必要做自己的专属网站。 准备工作&#xff1a; 1、申请免费域名&#xff08;也可以花钱注册域名相对稳定&#xff09;链接: 申请免费域名方法 2、申请免费主机&#xff08;也可以…

社交网络分析3:社交网络隐私攻击、保护的基本概念和方法 + 去匿名化技术 + 推理攻击技术 + k-匿名 + 基于聚类的隐私保护算法

社交网络分析3&#xff1a;社交网络隐私攻击、保护的基本概念和方法 去匿名化技术 推理攻击技术 k-匿名 基于聚类的隐私保护算法 写在最前面社交网络隐私泄露用户数据暴露的途径复杂行为的隐私风险技术发展带来的隐私挑战经济利益与数据售卖防范措施 社交网络 用户数据隐私…

python排序算法,冒泡排序和快排

对于排序算法中比较知名的两个算法&#xff0c;分别就是冒泡排序和快速排序&#xff0c;在日常学习和使用中都会听到这两种排序算法的名称&#xff0c;这里主要介绍如何使用python来实现这两种排序算法。 冒泡排序的实现&#xff1a;一是从集合第一个元素开始&#xff0c;每两…

饥荒Mod 开发(十四):制作屏幕弹窗

饥荒Mod 开发(十三)&#xff1a;木牌传送 在上一个文章里面制作了一个传送选择页面&#xff0c;是一个全屏的窗口&#xff0c;那饥荒中如何制作一个全屏的窗口&#xff0c;下面介绍一下如何从零开始制作一个全屏窗口 制作屏幕窗口 饥荒中的全屏窗口都有一个基类 “Screen”,我…