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

随着分布式微服务的兴起，越来越多的公司在开发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解决跨域的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • springboot+angular4前后端分离 跨域问题解决详解

    springboot+angular4前后端分离 跨域问题解决详解

    springboot中新增一个过滤器如下: package com.rtpksps.kss.config; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @author Administrator * @title: OriginFilt

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

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

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

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

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

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

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

  • Springboot前后端分离项目配置跨域实现过程解析

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

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

    随着分布式微服务的兴起,越来越多的公司在开发web项目的时候选择前后端分离的模式开发,前后端分开部署,使得分工更加明确,彻底解放了前端. 我们知道,http请求都是无状态,现在比较流行的都是jwt的形式处理无状态的请求,在请求头上带上认证参数(token等),前后端分离有好处,也有坏处,第一次开发前后端分离项目的人,肯定会遇到前端请求跨域的问题,这个怎么处理呢?在说处理方案前,有必要说明一下为什么会跨域和什么是跨域? 一.为什么会跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginp

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

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

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

  • vue2 前后端分离项目ajax跨域session问题解决方法

    最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

  • nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

  • SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • SpringBoot Security前后端分离登录验证的实现

    最近一段时间在研究OAuth2的使用,想整个单点登录,从网上找了很多demo都没有实施成功,也许是因为压根就不懂OAuth2的原理导致.有那么几天,越来越没有头绪,又不能放弃,转过头来一想,OAuth2是在Security的基础上扩展的,对于Security自己都是一无所知,干脆就先研究一下Security吧,先把Security搭建起来,找找感觉. 说干就干,在现成的SpringBoot 2.1.4.RELEASE环境下,进行Security的使用. 简单的Security的使用就不说了,目前

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

随机推荐