SpringBoot前后端分离解决跨域问题的3种解决方案总结

目录
  • 什么是跨域
  • 跨域问题的解决策略
  • 三种解决方法
  • 总结

什么是跨域

想要知道什么是跨域的话,我们可以通过一个小案例简单了解一下跨域的概念:在项目代码编写的时候,我们将前端项目代码和后端的项目代码相分离开,一个运行在本地的8080端口一个运行在本地的8888端口,这也就是我们常说的前后端分离项目。现在使用前端的请求去调用后端的接口,就会产生以下的错误

Access to XMLHttpRequest at 'http://localhost:8888/请求名' 
from origin ‘http://localhost:8080’ has been blocked by 
CORS policy: No ‘Access-Control-Allow-Origin’ 
header is present on the request resource.

错误原因:基于浏览器的保护机制,当请求中缺少了一些http头信息时,读取响应的操作就会被阻止。出现这个问题并不是说后端没有接收到前端发送过来的请求,相反后端接收请求并且将响应信息返回给了前端,但是返回的响应信息被前端浏览器所拦截了。

这个保护机制就是浏览器的一种重要的安全策略——同源策略,该策略可以限制不同源之间的交互行为,从而有效避免一些浏览器层面的攻击。所谓的同源就是指url中的协议、域名、端口三个都相同。反观案例的url前端http://localhost:8080请求http://localhost:8888/请求名,协议和域名都相等但是端口却不一样导致两个是不同源,不同源的话就会产生跨域问题。

跨域问题的解决策略

CROS(Cross Origin Resource Sharing)策略,全称为跨域资源共享策略,是后端用来解决跨域问题的一个方案(当然前端也有解决跨域问题的对应方案),抛开底层具体的解决原理不说,今天就学习一下如何借助该策略实现跨域问题的解决。

三种解决方法

第一种也是最简单但不常用的一种,只需要在后端接口方法上添加 @CrossOrigin 注解,即可解决对这个接口方法的请求跨域问题,但是在实际开发中一般都会有很多的方法,在每一个方法上都添加这个注解的话明显就会很影响使用感受。当然还可以将注解添加到类上,表示类中的所有方法都解决了跨域问题,但是类也不止一个还是麻烦。

@CrossOrigin
@GetMapping("/请求名")
public String sayHello() {
    return "hello world !";
}

第二种就是使用过滤器统一处理

// 对比着看,包千万别导错了
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 使用通配符* 允许所有的域请求
        corsConfiguration.addAllowedOrigin("*");
        // 使用通配符* 允许所有请求头字段
        corsConfiguration.addAllowedHeader("*");
        // 使用通配符* 允许所有请求头方法类型
        corsConfiguration.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 处理请求映射
        source.registerCorsConfiguration("/**", corsConfiguration);

        return new CorsFilter(source);
    }
}

第三种就是使用WebMvc的配置类

// 对比着看,包千万别导错了
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")      // 设置映射
                .allowedOriginPatterns("*")        // 设置域
                .allowedMethods("*")               // 设置请求的方式GET、POST等
                .allowCredentials(true)            // 设置是否携带cookie
                .maxAge(3600)                      // 设置设置的有效期 秒单位
                .allowedHeaders("*");              // 设置头
    }
}

总结

到此这篇关于SpringBoot前后端分离解决跨域问题的3种解决方案的文章就介绍到这了,更多相关SpringBoot前后端分离跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SpringBoot跨域问题的五种解决方式

    目录 一.什么是跨域 CORS 二.为什么会有跨域问题 三.有哪些跨域类型 四.解决跨域问题的五种方式 1. 添加跨域配置类 2. 重写WebMvcConfigurer 3. 注解 @CrossOrigin 4. 自定义过滤器 5. 手动设置响应头 前后分离的跨域问题其他解决方案 Nginx服务器反向代理 或者直接在Nginx中进行配置 总结 一.什么是跨域 CORS 当一台服务器资源从另一台服务器(不同 的域名或者端口)请求一个资源或者接口,就会发起一个跨域 HTTP 请求. 举个简单的例子,

  • springboot 跨域配置类及跨域请求配置

    下面通过代码看下springboot 跨域配置类,代码如下所示: ackage org.fh.config; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRe

  • 解决SpringBoot自定义拦截器和跨域配置冲突的问题

    目录 SpringBoot自定义拦截器和跨域配置冲突 技术栈 问题引出 原代码 新代码 SpringBoot 拦截器和addCorsMappings冲突 SpringBoot自定义拦截器和跨域配置冲突 技术栈 vue-cli3,springboot 2.3.2.RELEASE 问题引出 在做毕业设计过程中用到了自定义拦截器验证登录.同时在springboot配置类中设置了跨域问题,出现跨域失败的情况. 原代码 @Configuration public class WebConfig exten

  • SpringBoot中到底该如何解决跨域问题

    目录 前言 1.跨域访问报错 2.同源定义 3.跨域问题如何解决? 4.CORS原理 5.SpringMVC中如何解决跨域问题? 6.方案1:方法或者类上标注@CrossOrigin注解 7.方案2:全局配置的方式 8.方案3:拦截器的方式CorsFilter 9.案例代码 9.1.案例完整代码 9.2.接口代码:CorsController 9.3.静态页面:cors.html 9.4.将chat21-cores模块发布到tomcat 9.5.运行静态页面cors.html 9.6.点击第1个

  • 最新springboot解决跨域的几种方式小结

    目录 什么是跨域 springboot解决跨域的几种方式 方法一.SpringBoot的注解@CrossOrigin 方式二:使用CorsFilter 方式三:自定义过滤(web  filter)的方式 方式四:实现WebMvcConfigurer中addCorsMappings方法 方法五:采用nginx做动态代理 什么是跨域 跨域:指的是浏览器不能执⾏其他⽹站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.例如:a页⾯想获取b页⾯资源,如果a.b页⾯的协议

  • Spring Boot详解五种实现跨域的方式

    目录 一.为什么会出现跨域问题 二.什么是跨域 三.非同源限制 四.java后端实现CORS跨域请求的方式 1. 返回新的CorsFilter(全局跨域) 2. 重写WebMvcConfigurer(全局跨域) 3. 使用注解 (局部跨域) 4. 手动设置响应头(局部跨域) 5. 使用自定义filter实现跨域 一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能

  • SpringBoot解决跨域的5种方式小结

    什么是跨域 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域: java解决CORS跨域请求的方式 对于CORS的跨域请求,主

  • 教你用Java SpringBoot如何解决跨域

    目录 跨域 什么是跨域 CORS SpringBoot解决跨域方案 1.使用@CrossOrigin注解 2.Spring框架全局配置CORS配置 具体实现 1.使用@CrossOrigin注解 1.1目录结构 1.2运行结果 2.使用@CrossOrigin注解 2.1Spring MVC CORS 使用WebMvcConfigurerAdapter配置! 2.3Spring Boot CORS 使用WebMvcConfigurer配置 2.4CORS 使用Spring Security配置

  • SpringBoot前后端分离解决跨域问题的3种解决方案总结

    目录 什么是跨域 跨域问题的解决策略 三种解决方法 总结 什么是跨域 想要知道什么是跨域的话,我们可以通过一个小案例简单了解一下跨域的概念:在项目代码编写的时候,我们将前端项目代码和后端的项目代码相分离开,一个运行在本地的8080端口一个运行在本地的8888端口,这也就是我们常说的前后端分离项目.现在使用前端的请求去调用后端的接口,就会产生以下的错误 Access to XMLHttpRequest at 'http://localhost:8888/请求名' from origin ‘http

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • shiro整合springboot前后端分离

    本文实例为大家分享了shiro整合springboot前后端分离的具体代码,供大家参考,具体内容如下 1.shiro整合springboot的配置 package com.hisi.config; import java.util.LinkedHashMap; import java.util.Map; import javax.servlet.Filter; import org.apache.shiro.session.mgt.eis.MemorySessionDAO; import org

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • springBoot前后端分离项目中shiro的302跳转问题

    springBoot前后端分离项目shiro的302跳转 项目是使用的springboot ,使用的shiro做的用户鉴权.在前端请求时当用户信息失效,session失效的时候,shiro会重定向到配置的login.jsp 页面,或者是自己配置的logUrl. 因是前后端分离项目,与静态资源文件分离,固重定向后,接着会404. 经过查找网上配置资料,发现302原因是 FormAuthenticationFilter中onAccessDenied 方法做了相应处理.那知道问题所在,就可以有解决方了

  • IDEA教程创建SpringBoot前后端分离项目示例图解

    目录 创建springboot项目 测试项目 按照MVC格式创建数据库项目 总结 springboot就是简化Spring应用中的初始化配置,快速创建项目而生的. 创建springboot项目 代开idea,点击File->New->Project,弹出如下对话框 输入组织.工程名,选择maven工程,注意:java版本号选择8 可以根据自己项目的需求选择依赖包,系统会自动将这些依赖包写入maven的pom文件,如下选择Spring Web.myBtias.mySQL驱动等.无需担心漏掉依赖包

  • SpringBoot前后端分离实现验证码操作

    目录 1.SpringBoot版本 2.引入依赖 3.实现思路 新建验证码枚举类 定义验证码配置信息 定义验证逻辑生成类 在控制层上定义验证码生成接口 效果体验 在前端调用接口 1.SpringBoot版本 本文基于的Spring Boot的版本是2.6.7 . 2.引入依赖 captcha一款超简单的验证码生成,还挺好玩的.还有中文验证码,动态验证码. .在项目中pom.xml配置文件中添加依赖,如下: <!--验证码--> <dependency> <groupId>

随机推荐