返回顶部
首页 > 资讯 > 后端开发 > Python >springboot解决前后端分离时的跨域问题
  • 377
分享到

springboot解决前后端分离时的跨域问题

2024-04-02 19:04:59 377人浏览 八月长安

Python 官方文档:入门教程 => 点击学习

摘要

目录一、为什么会跨域? 二、什么是跨域? 三、处理跨域 1、在controller的类上或方法上添加注解 2、在启动类配置全局cors(SpringBoot2.0已经过时)3、注册c

随着分布式微服务的兴起,越来越多的公司在开发WEB项目的时候选择前后端分离的模式开发,前后端分开部署,使得分工更加明确,彻底解放了前端

我们知道,Http请求都是无状态,现在比较流行的都是Jwt的形式处理无状态的请求,在请求头上带上认证参数(token等),前后端分离有好处,也有坏处,第一次开发前后端分离项目的人,肯定会遇到前端请求跨域的问题,这个怎么处理呢?在说处理方案前,有必要说明一下为什么会跨域和什么是跨域?

一、为什么会跨域?

出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

二、什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url 被请求页面url 是否跨域 原因
https://www.52fansite.com/ https://www.52fansite.com/index.html 同源(协议、域名、端口号相同)
https://www.52fansite.com/ http://www.52fansite.com/index.html 协议不同(https/http)
https://www.52fansite.com/ https://www.baidu.com/ 主域名不同(52fansite/baidu)
https://www.52fansite.com/ https://layui.52fansite.com/ 子域名不同(www/layui)
https://www.52fansite.com:8080/ https://www.52fansite.com:8081/ 同源(协议、域名、端口号相同)

三、处理跨域

1、在controller的类上或方法上添加注解

1.1类上加注解


@RestController
@CrossOrigin(origins = "*")
public class CorsController {

    @GetMapping("/cors")
    public String testCors() {
        return "success";
    }
}

1.2方法上加注解


@RestController
public class CorsController {

    @CrossOrigin(origins = "*")
    @GetMapping("/cors")
    public String testCors() {
        return "success";
    }
}

2、在启动类配置全局cors(springboot2.0已经过时)


@SpringBootApplication
public class Application {

 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }

 @Bean
 public WebmvcConfigurer corsConfigurer() {
  return new WebMvcConfigurerAdapter() {
   @Override
   public void addCorsMappings(CorsReGIStry registry) {
    registry.addMapping("/*").allowedOrigins("*");
   }
  };
 }
}

替换为


@SpringBootApplication
public class Application {

 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }

 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurer() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/*").allowedOrigins("*");
   }
  };
 }
}

3、注册corsFilter


@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

以上就是springboot解决前后端分离时的跨域问题的详细内容,更多关于springboot解决跨域的资料请关注编程网其它相关文章!

--结束END--

本文标题: springboot解决前后端分离时的跨域问题

本文链接: https://lsjlt.com/news/124448.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • springboot解决前后端分离时的跨域问题
    目录一、为什么会跨域? 二、什么是跨域? 三、处理跨域 1、在controller的类上或方法上添加注解 2、在启动类配置全局cors(springboot2.0已经过时)3、注册c...
    99+
    2024-04-02
  • springboot怎么解决前后端分离时的跨域问题
    这篇文章主要介绍springboot怎么解决前后端分离时的跨域问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!springboot是什么springboot一种全新的编程规范,其设计目的是用来简化新Spring应用...
    99+
    2023-06-14
  • Vue+SpringBoot前后端分离中的跨域问题
    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议、域名、端口号不同等),导致不能正常调用api...
    99+
    2024-04-02
  • 如何解决VueJs前后端分离跨域问题
    这篇文章给大家分享的是有关如何解决VueJs前后端分离跨域问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用vue-cli搭建的vue项目可以使用在项目内设置代理(proxy...
    99+
    2024-04-02
  • SpringBoot前后端分离解决跨域问题的3种解决方案总结
    目录什么是跨域跨域问题的解决策略三种解决方法总结什么是跨域 想要知道什么是跨域的话,我们可以通过一个小案例简单了解一下跨域的概念:在项目代码编写的时候,我们将前端项目代码和后端的项目...
    99+
    2024-04-02
  • 如何解决vue2中前后端分离项目ajax跨域session的问题
    这篇文章将为大家详细讲解有关如何解决vue2中前后端分离项目ajax跨域session的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实现跨域请求时,每次ajax请求...
    99+
    2024-04-02
  • vue+springboot前后端分离如何实现单点登录跨域问题
    这篇文章主要介绍vue+springboot前后端分离如何实现单点登录跨域问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下:@Configuration public&nb...
    99+
    2024-04-02
  • 前后端分离和跨域问题的详细解决方案(CORS的原理)
    目录前后端分离前后端分离的好处个人理解上存在两种解释跨域问题存在的原因跨域问题的解决方案修改浏览器配置解决跨域使用jsonp解决跨域CORS解决跨域 服务软件实现跨域基于A...
    99+
    2023-02-15
    前后端分离跨域解决方案 前后端分离 跨域 跨域解决方案前端
  • 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案
    一.问题背景 前后端分离项目跨域问题,浏览器控制台报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTIONS,...
    99+
    2023-08-31
    服务器 java linux Powered by 金山文档
  • SpringCloud前后端分离后引起跨域访问的示例分析
    这篇文章主要为大家展示了“SpringCloud前后端分离后引起跨域访问的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“SpringCloud前后端分离...
    99+
    2024-04-02
  • 跨域浏览器设置解决前端跨域问题
    目录一、什么是跨域二、什么情况下会出现跨域三、uni-app 项目 解决跨域办法四、Vue.js 项目 解决跨域办法五、终极解决办法,删除浏览器跨域限制一、什么是跨域 出于浏览器的同...
    99+
    2024-04-02
  • nginx 配置解决前端跨域问题
    一、为什么会出现跨域问题        出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策...
    99+
    2023-09-10
    前端 nginx 服务器
  • web前端跨域问题怎么解决
    本文小编为大家详细介绍“web前端跨域问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“web前端跨域问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。为什么跨域?为什么会出现跨域问题呢?那就不...
    99+
    2023-06-29
  • Spring Cloud项目前后端分离跨域的操作
    跨域问题,其实百度上面有一堆的解决方案 针对普通的情况其实百度上面的方案都是可行的。 我这里主要介绍2种情况。 当然我这里的配置都是基于网关的,而不是基于服务的。 1、没有增加权限...
    99+
    2024-04-02
  • 前后端跨域解决方案
    目录 一、为什么会有跨域问题二、解决跨域方案有哪些三、解决跨域最佳方案是什么四、Spring中如何引入CORS 一、为什么会有跨域问题 跨域问题是由于浏览器的同源策略导致的。同源策略是一种安全策略,它限制了一个源的文档或脚本...
    99+
    2023-08-20
    前端 服务器 javascript
  • java后端怎么解决跨域问题
    在Java后端解决跨域问题可以使用以下几种方法: 使用Servlet的过滤器:创建一个实现javax.servlet.Filte...
    99+
    2023-10-23
    java
  • 分享后端解决跨域问题的三种方案
    1.跨域的介绍 跨源资源共享(CORS——Cross-Origin Resource Sharing,跨源资源共享,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它源(域、协议或端口)...
    99+
    2023-09-01
    spring boot 网络 java Powered by 金山文档
  • java后端解决跨域的几种问题解决
    1.java过滤器过滤 允许整个项目跨域访问,可通过filter来进行过虑: public class SimpleCORSFilter implements Filter{ ...
    99+
    2024-04-02
  • 前端跨域问题解决及七大跨域原理详解
    目录为什么跨域?跨域的时机?同域情况 && 跨域情况?解决跨域的方案JSONPWebSocketCorsNode接口代理NginxpostMessagedocumen...
    99+
    2024-04-02
  • 如何在前端中解决跨域问题
    如何在前端中解决跨域问题?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.)&...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作