前端访问SpringBoot后端的跨域问题

最新推荐文章于 2024-05-17 02:37:18 发布
最新推荐文章于 2024-05-17 02:37:18 发布
阅读量445 收藏
点赞数
分类专栏： Web 文章标签： 前端 java spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56930747/article/details/126004202
版权

        使用axois请求SpringBoot后端时遇到了如下问题：

 我的前后端服务器都是localhost，为什么会跨域呢？那么我们需要了解一下什么是同源策略。

同源策略

同源是指主机(host)+端口号(port)都一致，才称为同源，即在一个域内。

那么同源策略的作用是什么？

同源策略是浏览器最核心的安全功能，简单来说，同源策略限制了只有同源的请求能够被处理，其他的一律被阻止，起到了最基本的保护作用。

如何解决？

使用SpringBoot搭建后端服务器的话，只需要在我们想被访问到的RequestMapping上加@CrossOrigin注解即可有效的解决这个问题。

什么是@CrossOrigin

它是Spring Framework 4.2 GA为CORS（跨域资源共享）提供的，可以使用该注解在Spring搭建的环境中灵活简单地对跨域请求进行授权。可以使用在@RequestMapping注解的方法或者类上。

大雾肆起
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot前后台分离两套服务，前台请求后台跨域问题不让访问的问题解决
oMangGuoBuDing1的专栏
05-14 322
前后台分离两套服务，前后端是不同的进程服务，端口号不同 ，ip也可能不同，这样请求浏览器认为就是跨域，不让访问，这时就要在后台加一些配置，允许跨域，下面时springboot的统一配置的代码。前台请求后台跨域问题不让访问的问题解决 import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Configuration; import org.spri...
Spring Boot 前后端跨域问题
L1Ha1Y1的博客
09-02 125
Spring Boot 前后端分离如何解决跨域问题 ? 编写一个类实现 WebMvcConfigurer 接口，添加@Configuration让该类成为配置类，然后重新addCorsMappings方法（添加跨域映射） @Configuration public class CorssConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry)
【springboot前后端分离项目前端页面访问不到的问题解决】
学无止境
03-01 1718
【springboot前后端分离项目前端页面访问不到的问题解决】
前端常见的跨域解决方法
最新发布
2401_84150102的博客
05-17 974
由于jsonp实现的跨域原理是动态尝试script标签，利用script标签的src不受同源策略的限制，但是使用jsonp的缺点是只能实现get请求，不能实现post请求；自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
后端允许跨域后，前端访问仍然存在跨域问题
qq_45634989的博客
07-07 7566
后端允许跨域后，前端访问仍然存在跨域问题
SpringBoot+Vue前后端跨域问题
qq_38856939的博客
03-25 1548
随着分布式微服务的兴起，越来越多的公司在开发web项目的时候选择前后端分离的模式开发，前后端分开部署，使得分工更加明确，彻底解放了前端。 我们知道，http请求都是无状态，现在比较流行的都是jwt的形式处理无状态的请求，在请求头上带上认证参数（token等），前后端分离有好处，也有坏处，第一次开发前后端分离项目的人，肯定会遇到前端请求跨域的问题，这个怎么处理呢？在说处理方案前，有必要说明一下为什么会跨域和什么是跨域？ 一、为什么会跨域？ 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）
springboot中前端需要访问后端资源解决跨域问题
m0_69558194的博客
03-04 194
java前端
springboot前后端访问出现跨域问题的后端最终解决方案
weixin_43496408的博客
10-21 298
springboot前后端访问出现跨域问题的后端最终解决方案 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * @PackageNa
springboot后端解决跨域问题
08-26
例如，如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。 什么是同一个域？ 同一协议，同一ip，同一端口，三同中有一不同就产生了跨域。 ...
解决 springboot跨域请求问题
05-11
这样，Nginx会接收前端的请求，并转发到后端服务器，对于前端而言，就好像后端与前端在同一源下一样，从而避免了跨域问题。 选择哪种解决方案取决于你的具体需求。服务端配置CORS简单且易于管理，适用于小型项目或...
详解Springboot+React项目跨域访问问题
08-26
然而，这种分离结构引入了一个技术挑战：跨域访问问题。本文将详细探讨这个问题，并提供解决方案。 首先，让我们了解什么是跨域。在Web浏览器的安全策略下，同源策略限制了JavaScript对不同源（协议、域名或端口）...
SpringBoot解决跨域请求拦截问题代码实例
08-25
跨域拦截是前端请求已经发出，并且在后端返回响应时检查相关参数，是否允许接收后端请求。在微服务开发中，一个系统包含多个微服务，会存在跨域请求的场景。 知识点3：SpringBoot解决跨域请求拦截 在SpringBoot中...
springboot设置跨域访问
03-29
前端跨域访问springboot后端时添加响应头。。。。。。
关于前后端分离的跨域问题解决方案
qq_42931285的博客
08-22 1613
1.JSONP:现在这种用的很少了 动态创建一个script标签，只有get请求，有缓存，传递的信息大小有限制等； 2.iframe 跨域也比较少 3.代理跨域（前端）+nginx反向代理（后端） 这种在目前在用vue的项目中是用的比较多的，在前端代码未发布之前，在vue.config。js中文件中进行配置，具体可查看vue官网。 https://cli.vuejs.org/zh/config/#css-loaderoptions 其实我之前以为跨域前端配置了就可以了，其实只对了一半。若代码打包上线之后，就
[错误日记]在springboot中添加了@CrossOrigin注解但还是出现跨域问题
qq_46070067的博客
11-20 1603
添加了@CrossOrigin注解但还是出现跨域问题
springboot之跨域访问cros，@CrossOrigin注解
YMYYZ的博客
01-09 9525
1.springboot之跨域访问cros，@CrossOrigin注解 2.浏览器协议的默认端口号
前端对接springboot框架开发接口出现跨域解决方案（简单有效）
weixin_43423484的博客
09-18 849
近期采用前后端分离开发一个项目，后端使用springboot框架，前端对接后端接口时候出现跨域问题
SpringBoot项目跨域请求放行配置工具类
zhengTornado的博客
12-06 591
package com.ruoyi.framework.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfigurat...
解决springboot 打war包到tomcat跨域访问问题。
da_xun的专栏
05-26 318
解决springboot服务，tomcat部署的跨域问题
springboot后端解决跨域配置文件
07-16
### 回答1： 在Spring Boot后端解决跨域问题需要进行以下配置。 首先，我们需要在项目中创建一个跨域配置类，例如CorsConfig.java。在这个类中，我们可以使用@Configuraion注解来标记它是一个配置类，并使用@ConfiguraionProperties注解来指定配置的属性。 接下来，在配置类中，我们需要使用@Beane注解来注册一个CorsRegistration实例，并使用其allowedOrigins()方法来指定允许的源，即允许访问该接口的域名。例如，我们可以设置"*"来允许所有域名访问。 然后，我们可以使用allowedMethods()方法来指定允许的HTTP方法。默认情况下，GET、POST和HEAD方法是允许的，但我们也可以自定义允许的方法。 接下来，我们可以使用allowedHeaders()方法来指定允许的请求头。这样我们可以在请求中添加自定义的请求头，并在后端进行处理。 最后，我们可以使用allowCredentials()方法来设置是否允许发送凭证信息。如果需要在请求中发送凭证信息（例如：cookies、HTTP认证等），我们需要将其设置为true。 完成了以上配置后，我们可以在Spring Boot的主启动类上使用@Import注解来导入跨域配置类。这样就可以使我们的配置生效。 总而言之，通过以上配置，我们就可以解决Spring Boot后端的跨域问题。这样我们就可以在前后端分离的项目中实现跨域访问接口。 ### 回答2： 在Spring Boot后端解决跨域问题，可以通过配置文件进行设置。步骤如下： 1. 创建一个名为"application.properties"的配置文件。 2. 在该文件中，添加以下内容来配置跨域解决方案： ``` # 允许来自所有源的跨域访问 cors.allowed-origins=* # 允许的请求方法 cors.allowed-methods=GET, POST, PUT, DELETE # 允许的请求头部 cors.allowed-headers=Authorization,Content-Type # 是否允许发送cookie cors.allow-credentials=true # Max-Age设置为1小时 cors.max-age=3600 ``` 3. 保存并关闭配置文件。 4. 重新启动后端应用程序。 通过以上配置，允许来自所有源的跨域访问，并允许的请求方法包括GET、POST、PUT和DELETE。允许的请求头部包括Authorization和Content-Type，并允许发送cookie。Max-Age设置为1小时，即允许浏览器缓存跨域访问的响应结果。 注意：在具体应用场景中，我们也可以根据需求进行相应的调整和限制。 ### 回答3： 在Spring Boot后端应用中，我们可以通过配置文件来解决跨域请求的问题。 首先，我们需要在项目的资源文件夹中创建一个新的配置文件，命名为application.properties或application.yml，具体选择哪种格式取决于你的项目使用的是.properties还是.yml文件来进行配置。 接下来，我们需要在配置文件中添加如下配置： 对于application.properties格式的文件，可以添加以下内容： spring.mvc.cross-origin.allow-credentials=true spring.mvc.cross-origin.allowed-headers=* spring.mvc.cross-origin.allowed-methods=GET,POST,PUT,DELETE spring.mvc.cross-origin.allowed-origins=* 对于application.yml格式的文件，可以添加以下内容： spring: mvc: cross-origin: allow-credentials: true allowed-headers: "*" allowed-methods: GET,POST,PUT,DELETE allowed-origins: "*" 以上配置的含义是允许携带身份凭证（allow-credentials）、允许所有的请求头（allowed-headers）、允许的请求方法（allowed-methods）、允许的来源地址（allowed-origins）。 配置完成后，保存配置文件并重启后端应用，这样就完成了跨域请求的配置。现在，前端的跨域请求将被允许访问后端接口，从而实现解决跨域问题。 需要注意的是，实际部署时应根据具体的安全需求对跨域配置进行细化，并只允许必要的请求来源和请求方法，以确保系统的安全性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值