什么是跨域问题,SpringBoot如何解决?

news/2024/6/16 11:16:05/文章来源:https://blog.csdn.net/weixin_43739821/article/details/137236420

目录

  • 什么是跨域?
  • 如何解决跨域问题?
    • JSONP (JSON with Padding)
    • CORS(跨源资源共享)
      • @CrossOrigin注解实现
      • WebMvcConfigurer addCorsMappings
      • CorsFilter
    • 代理服务器反向代理(推荐)

什么是跨域?

跨域是指浏览器为了安全性,设定的一种同源策略。只有当协议、域名和端口都相同的时候,两个页面之间才能相互访问对方的 DOM、Cookie 等数据。如果不满足这些条件,那么数据访问就会被浏览器阻止,我们称之为跨域。这是一种安全机制,防止用户的信息被恶意的网站获取。但是在实际开发中,我们经常需要进行跨域请求,比如使用 ajax 请求其他网站的 API,这时候就会遇到跨域问题。

域名不同,协议不同,端口不同,二级域名不同,ip不同都算作跨域。

要注意的是,跨域异常只会在前端发生,就是因为浏览器的同源策略。在后端通过restTemplate或者通过HttpClient去请求其他的域,此时虽然是跨域但是不会出现异常。




如何解决跨域问题?

JSONP (JSON with Padding)

JSONP是一种比较老的方法,目前已经慢慢被替代。它通过动态插入一个<script>标签到HTML中来获取跨域数据。

优点是它足够老所以在浏览器上的兼容性很好。
缺点是它只能用于GET请求,并且需要在前后端都写上相应的代码来支持,并且不安全,容易受到 XSS 攻击(利用漏洞向网页中注入恶意的客户端脚本)。

比如下面在前端通过Ajax的方式进行跨域请求,需要指定数据类型为jsonp,这样就会自动在请求参数中加入一个叫Callback的参数默认随机,作为一个秘钥传到后端,后端还会返回回来相当于一次握手,表示合法跨域请求,便可以进行跨域访问了。

请添加图片描述

后端在springboot实现也很简单,只需要声明一个Callback的参数来接收,然后返回JSONObject的对象,将Callback作为第一个参数,第二个参数是返回给前端的json数据data。比如假设这里传入的Callback是xushu,返回的数据格式就是xushu(data)

请添加图片描述



CORS(跨源资源共享)

CORS是一种W3C规范,它允许在服务器端设置哪些源可以访问服务器的资源。这是通过服务器发送特殊的HTTP头来实现的。
优点是只需要修改后端的代码,前端不需要干预,所以没有jsonp的耦合缺点,浏览器一旦发现请求跨源,就会自动添加一些附加的头信息,但用户察觉不到。

缺点是需要浏览器支持,比如ie就不能低于10版本。

在springboot中实现CORS有三种方式:

@CrossOrigin注解实现

可以设置当前的这一个接口支持跨域请求,并且还可以在注解属性里设置跨域来源,只有这个来源才支持跨域请求。

请添加图片描述


WebMvcConfigurer addCorsMappings

配置一个实现了WebMvcConfigurer的Bean,重写addCorsMappings方法,通过方法参数里的注册器来批量添加哪些接口允许跨域请求。

请添加图片描述


CorsFilter

如果想配置所有的接口都支持跨域,就可以通过配置一个过滤器的Bean,通过这个Bean就可以去限制所有的接口是支持跨域的、

请添加图片描述



代理服务器反向代理(推荐)

比如通过nginx,不需要在前后端做任何配置,只需要在nginx进行配置,此时浏览器请求的是同一个域,但浏览器检测不到你进行了跨域,因为我们是在nginx这一层转到我们的后端,但是后端跟后端之间是不存在跨域的,这便解决了前端的跨域异常。
这种方法的优点是不需要修改任何前后端代码,同时它可以隐藏你的真实服务器地址,增加安全性。
缺点是它可能需要额外的服务器资源。

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

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

相关文章

蓝桥杯第八届c++大学B组详解

目录 1.购物单 2.等差素数列 3.承压计算 4.方格分割 5.日期问题 6.包子凑数 7.全球变暖 8.k倍区间 1.购物单 题目解析&#xff1a;就是将折扣字符串转化为数字&#xff0c;进行相加求和。 #include<iostream> #include<string> #include<cmath> usin…

【Java面试题系列】基础篇

目录 基本常识标识符的命名规则八种基本数据类型的大小&#xff0c;以及他们的封装类3*0.10.3返回值是什么short s1 1; s1 s1 1;有什么错? short s1 1; s1 1;有什么错?简述&&与&的区别&#xff1f;简述break与continue、return的区别&#xff1f;Arrays类的…

常见的三维建模软件有哪些?

云端地球是一款免费的在线实景三维建模软件&#xff0c;不需要复杂的技巧&#xff0c;只要需要手机&#xff0c;多拍几张照片&#xff0c;就可以得到完整的三维模型&#xff01; 无论是大场景倾斜摄影测量还是小场景、小物体建模&#xff0c;都可以通过云端地球将二维数据向三…

宝塔面板 -- 打包前端项目并部署提升访问速度

文章目录 前言一、打包前端项目二、添加PHP项目三、部署打包文件四、开通防火墙五、运行网站总结 前言 在前面写到的文章使用宝塔面板部署前端项目中&#xff0c;并没有将前端项目打包而是直接部署&#xff0c;导致网站访问速度非常慢&#xff0c;加载甚至要十几秒。因此&…

两张图片相似度匹配算法学习路线

大纲&#xff1a;​​​​​​目标跟踪基础&#xff1a;两张图片相似度算法-腾讯云开发者社区-腾讯云 (tencent.com) 目标跟踪基础&#xff1a;两张图片相似度算法 (qq.com) 一、传统方法 1.欧式距离&#xff08;用于判断是否完全相同&#xff09; [三维重建] [机器学习] 图…

Vue2.x安装Tinymce依赖冲突解决

Vue2.x安装Tinymce依赖冲突原因 使用vue整合tinymce富文本编辑器&#xff0c;安装依赖时报错 报错的原因是下载版本与vue的版本对不上vue2.x版本应该使用如下指定版本依赖更合适 npm install --save "tinymce/tinymce-vue^3.1"额外依赖为 npm install --save &quo…

“和美大桥 共创未来”,共富联合体打响稽东优质春茶金字招牌

2024年3月31日&#xff0c;由日茗康茶业主办&#xff0c;稽东“和美大桥 共创未来”乡村共富联合体协办的“第二届稽东春山好暨日茗康新茶品鉴会”活动在绍兴市柯桥区稽东镇大桥村委举行。 新茶品鉴会上有来自绍兴市、柯桥区、稽东镇的有关领导出席&#xff0c;茶友及行业专家1…

leetcode刷题-字符串

目录 1、Reverse String 反转字符串 2、Reverse String II 反转字符串II 3、Reverse Words in a String 翻转字符串里的单词 4、Find the Index of the FirstOccurrence in a String 实现 strStr() KMP算法 next数组如何建立 模式串和字符串匹配 5、Repeated Substring…

Rust---有关介绍

目录 Rust---有关介绍变量的操作Rust 数值库&#xff1a;num某些基础数据类型序列(Range)字符类型单元类型 发散函数表达式&#xff08;&#xff01; 语句&#xff09; Rust—有关介绍 得益于各种零开销抽象、深入到底层的优化潜力、优质的标准库和第三方库实现&#xff0c;Ru…

【物联网】Qinghub opc-ua 连接协议

基础信息 组件名称 &#xff1a; opcua-connector 组件版本&#xff1a; 1.0.0 组件类型&#xff1a; 系统默认 状 态&#xff1a; 正式发布 组件描述&#xff1a;通过OPCUA连接网关&#xff0c;通过定时任务获取OPCUA相关的数据或通过执行指令控制设备相关参数。 配置文件&a…

鸿蒙HarmonyOS应用开发之Native与ArkTS对象绑定

场景介绍 通过napi_wrap将ArkTS对象与Native的C对象绑定&#xff0c;后续操作时再通过napi_unwrap将ArkTS对象绑定的C对象取出&#xff0c;并对其进行操作。 使用示例 接口声明、编译配置以及模块注册 接口声明 // index.d.ts export class MyObject {constructor(arg: num…

第十八章 算法

一、介绍 1.1 什么是算法 算法&#xff08;Algorithm&#xff09;是指解题方案的准确而完整的描述&#xff0c;是一系列解决问题的清晰指令&#xff0c;算法代表着用系统的方法描述解决问题的策略机制。也就是说&#xff0c;能够对一定规范的输入&#xff0c;在有限时间内获…

微软开源的面向初学者的生成式人工智能课程

介绍 微软开源了一套面向初学者的生成人工智能课程&#xff0c;旨在通过18节课教我们开始构建生成式AI应用程序所需知道的一切。 课程设置&#xff1a; 序号课程1生成式AI和大语言模型导论2探索和比较不同的大语言模型3使用生成式AI4理解提示词工程基础5创建高级提示词6构建…

VSCode - 离线安装扩展python插件教程

1&#xff0c;下载插件 &#xff08;1&#xff09;首先使用浏览器打开 VSCode 插件市场link &#xff08;2&#xff09;进入插件主页&#xff0c;点击右侧的 Download Extension 链接&#xff0c;将离线安装包下载下来&#xff08;文件后缀为 .vsix&#xff09; 2&#xff0c;…

EyouCMS换服务器网站内页出现大量404页面(已解决)

换了服务器后打开网站&#xff0c;内页全部显示404吓死人&#xff0c;去网上查发现是伪静态设置问题&#xff0c;今天就把这个设置方法交给大家&#xff01; 第一步&#xff0c;宝塔面板找到伪静态然后选中THINKPHP 第二步&#xff0c;登录官网后台&#xff0c;清除网站后台缓…

每天五分钟计算机视觉:如何基于滑动窗口技术完成目标的检测?

汽车检测算法 现在我们想要构建一个汽车检测算法,我们希望输入到算法中一张图片,算法就可以帮助我们检测出这张图片中是否有汽车。 数据集 首先创建一个标签训练集,x是样本,y是标签。我们的训练集最好是被剪切过的图片,剪掉汽车以外的部分,使汽车居于中间位置,就是整张…

问题2-前端json数组数据转换成csv文件

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>将 JSON 数据导出为 CSV 文件</title> …

用html实现一个日历便签设计

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>日历便签设计</title><link hrefhttps://fonts.googleapis.com/css?familyMontserrat:700,400 relstylesheet typetext/css><link hr…

IDEA2023使用手册 【持续更新...】

IDEA介绍 IDEA官网&#xff1a;https://www.jetbrains.com.cn/idea/IDEA 2023.2.2下载地址&#xff1a;https://download.jetbrains.com/idea/ideaIU-2023.2.2.exe对第三方软件的支持&#xff1a;https://www.jetbrains.com/legal/third-party-software/?productiiu&versi…

docker基础学习指令

文章目录 [toc] docker基础常用指令一、docker 基础命令二、docker 镜像命令1. docker images2. docker search3. docker pull4. docker system df5. docker rmi1. Commit 命令 三、 docker 容器命令1. docker run2. docker logs3. docker top4. docker inspect5. docker cp6. …