后端通过CorsRegistry对象配置了全局跨域,但是前端仍然报CORS跨域错误

这篇具有很好参考价值的文章主要介绍了后端通过CorsRegistry对象配置了全局跨域,但是前端仍然报CORS跨域错误。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

后端通过CorsRegistry配置了全局跨域,但是前端仍然报CORS跨域错误

  • 问题背景

    在实现登录功能时,我先是通过CorsRegistry配置了全局跨域,然后配置了一个登录拦截器后前端就报错CORS跨域错误

  • 问题原因

    • 前置知识

      首先我们来了解一下什么是跨域错误,跨域错误(Cross-Origin Error)是在Web开发中常见的错误之一,它发生在浏览器执行跨源请求(从一个源访问另一个源)时。同源策略(Same-Origin Policy)是浏览器的安全机制,它限制了通过脚本在不同源之间进行跨域通信。"源"是由协议、主机名和端口号组成的标识符。如果两个页面的协议、主机名和端口号完全相同,则它们被视为同源。同源策略的存在是为了保障网站安全、防止跨站脚本攻击。

    • 原因分析

      在前后端分离的项目中,很容易出现跨域错误,因为前端和后端的端口号、主机名一般都不相同,此时前端能够发送请求给后端,但是由于同源策略的存在,会直接被浏览器给拦截。从而出现CORS错误。跨域配置成功还是报跨域错误,Bug记录,bug,java

      浏览器如何判断当前是否跨域呢?浏览器会在发送真实请求之前先发送一个OPTIONS请求,这个请求相当于一个探子,如果发现目标路径可达并且端口、主机一致就会直接通过,如果不一致浏览器就会直接拦截前端的请求,导致后续的真实请求(比如GET、POST、PUT、DELETE)无法发送到后端。

      所以错误的跟本原因在于OPTIONS,由于我配置了登录拦截器,对于放行请求,不会有什么问题,但是对于没有放行的请求,会直接拦截OPTIONS请求,OPTIONS请求是一个探测请求,内部并不会携带token,所以就直接导致OTIONS请求被拦截,这样就会让浏览器觉得请求不可达,直接在前端报CORS error

  • 问题解决

    解决跨域问题的方法有很多,我了解的有配置代理(配置代理的方式也有很多,比如Nginx、大部分前端脚手架也有自带的Prox模块用于配置代理)、使用JSONP的 <script>标签也可以配置跨域,我一般都是直接在后端配置跨域的,可以使用**CorsRegistry对象进行全局配置,也可以使用@CrossOrigin注解**进行单个请求配置,而当前项目中我所使用的是 CorsRegistry 对象进行全局配置。

    • 方案一:直接使用代理,比如Nginx、前端脚手架自带的代理(可行,但我没有使用)

    • 方案二:在后端的登录拦截器中放行所有的OPTIONS请求(采用并成功解决

      跨域配置成功还是报跨域错误,Bug记录,bug,java

可以看到配置后,重启后端项目,然后就没有出现 CORS error错误了

跨域配置成功还是报跨域错误,Bug记录,bug,java

参考文章文章来源地址https://www.toymoban.com/news/detail-721922.html

  • SpringBoot加了拦截器后出现的跨域问题解析

到了这里,关于后端通过CorsRegistry对象配置了全局跨域,但是前端仍然报CORS跨域错误的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(81)
  • 史上最全的前端axios和后端跨域配置处理-许锅锅啊

    本小节内容需要对vue前端框架以及对后端的基础框架所有掌握哦!前后端项目分离中经常会涉及到请求跨域的问题,今天让我们一起来掌握它吧!!! 安装axios【https://www.axios-http.cn/】 封装一个基本的请求js 创建remote.ts或者其他文件名 使用 Vite 解决跨域问题 Access-Control-Allo

    2024年01月19日
    浏览(55)
  • vue 后端返回二进制流-前端通过blob对象下载文件-图片

    前言 在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件 下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载 但不管是那种方

    2024年02月05日
    浏览(81)
  • FPGA直接烧写.bit文件失败但是可以通过PROM配置的情况

    最近遇到一个问题,直接往FPGA里烧写bit文件有时候能成功,有时候不能成功。假如先往PROM里写程序,不断电,再通过JTAG往FPGA里写程序,就一定烧不进去。 在Generate Programming File的选项里把Enable Internal Done Pipe的选项勾选上,或许问题就可以解决了。 FPGA 的配置寄存器中有一个

    2023年04月08日
    浏览(41)
  • IIS部署vue前端过程(含IIS及相关配置和安装),部署遇到的问题及报错(承接vueconfig.js全局配置环境变量,跨域问题)

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步,打开“ 控制面板 ”,点击“ 网络和Internet ”。 第二步,点击左侧“ 程序 ”,然后点击

    2024年02月08日
    浏览(69)
  • 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错,接口调不通 配置proxy代理解决跨域问题的原理是: 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(58)
  • react通过axios发送请求并演示配置多个反向代理地址解决跨域

    这里 我们准备一个接口 我这里用java写了一个 然后 我们打开react项目 安装axios 然后在src下创建一个setupProxy.js 编写代码如下 可以看到 这里我们配了两个方向代理 如果请求的路中 包含api 就会代理成 http://localhost:8080/请求路径 如果包含user则会成为 http://localhost:808/请求路径 这

    2023年04月10日
    浏览(53)
  • 阿里云对象存储OSS配置自定义域名、CDN加速及设置跨域

    采用阿里云OSS服务,对资源文件管理和提供全球化CDN服务 OSS官方文档   OSS每次发布涉及的功能变更及对应的文档_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/114894.html 开通对象存储OSS服务       如果域名不是托管给阿里云管理,不能勾选自动添加CNAME记录。 需要手动

    2023年04月09日
    浏览(47)
  • uniapp小程序自定义loding,通过状态管理配置全局使用

    一、在项目中创建loding组件 在uniapp的components文件夹下创建loding组件,如图: 示例代码: 二、在main.js中全局挂载store 三、配置loding状态管理(状态管理可以按自己的需求配置) 状态管理存储: 在store文件夹下创建modules文件,里面创建loding.js 模块统一暴露: 在store文件夹下创

    2024年02月15日
    浏览(38)
  • 【跨域异常】get请求能访问,但是post请求报403跨域异常

    前端vue项目调用后端SpringBoot接口,后端配置了跨域访问,但是出现了get请求能正常访问,但是post请求报403异常的情况。如下图 最后发现是后端的问题,正常配置的后端跨域配置中需要加上一句: 具体原因:Springboot的版本问题 完整版跨域配置如下:

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包