前后端分离跨域方案

简介: 跨域相信大部分前后端协同开发的时候都会遇到,这对于初学者很是头疼,但是了解了以后就感觉也就那样吧。

前言

最近在写前后端分离项目的时候,遇到了前后端分离必须解决的跨域问题,而我起初只是在 Controller 层加上了注解@CrossOrigin(allowCredentials = "true"),暂时解决了跨域问题。但是在开发验证码的时候,始终获取不到session中的验证码字符,获取到的验证码字符始终为null,调试之后发现放入验证码字符的session与从session中获取验证码字符的session不是同一个session,这就又遇到了跨域问题,也就是说之前处理的跨域并不生效了,或者说之前并没有完全解决前后端分离跨域问题。

一、什么是CORS

CORS 是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了AJAX只能同源使用的限制。

它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。

二、CORS Header

属性 名词解释
Access-Control-Allow-Origin 允许哪个域发起跨域请求
Access-Control-Allow-Methods 设置允许跨域请求的方法
Access-Control-Max-Age 设置在多少秒内无需再发送预校验请求
Access-Control-Allow-Headers 允许跨域请求包含content-type
Access-Control-Allow-Credentials 设置允许Cookie

三、跨域错误信息

错误一:前、后端均无跨域处理

session不一致

跨域1-1.png

错误二:前端跨域处理,后端无跨域处理

跨域2-1.png

跨域错误信息

错误三:前端无跨域处理,后端跨域处理

跨域3.png
跨域3-1.png

四、跨域处理方法

前端处理方法

后端处理方法

1.在controller层加上@CrossOrigin注解

跨域后端处理.png

2.加一个全局跨域处理配置类

/**
 * @description 全局跨域配置类
 * @date: 2020/6/14
 * @author: PeiChen
 */
@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("PUT", "DELETE","GET","POST")
                        .allowedHeaders("*")
                        .exposedHeaders("access-control-allow-headers",
                                "access-control-allow-methods",
                                "access-control-allow-origin",
                                "access-control-max-age",
                                "X-Frame-Options")
                        .allowCredentials(false).maxAge(3600);
            }
        };
    }
}

五、前后端分离成功跨域

跨域成功1.png
跨域成功2.png

前后端分离项目,就必须要克服跨域问题,至此,本篇文章介绍的跨域问题就先告一段落了。
目录
相关文章
|
存储 SQL 关系型数据库
大数据量下数据库分页查询优化方案汇总
当需要从数据库查询的表有上万条记录的时候,一次性查询所有结果会变得很慢,特别是随着数据量的增加特别明显,这时需要使用分页查询。对于数据库分页查询,也有很多种方法和优化的点。下面简单说一下我知道的一些方法。
727 2
|
JavaScript
Qt视频播放器[QMediaPlayer+QVideowidget]
本代码在Window10下运行,利用qMediaPlayer和qvideowidget实现视频文件mp4的播放,并且提供进度显示,还可以通过拖动进度条来变换播放位置
1331 0
|
8月前
|
JSON 前端开发 安全
【潜意识java】前后端跨域问题及解决方案
本文深入探讨了跨域问题及其解决方案。跨域是指浏览器出于安全考虑,限制从一个域加载的网页请求另一个域的资源。
1347 0
|
8月前
|
存储 运维 安全
阿里云弹性裸金属服务器是什么?产品规格及适用场景介绍
阿里云服务器ECS包括众多产品,其中弹性裸金属服务器(ECS Bare Metal Server)是一种可弹性伸缩的高性能计算服务,计算性能与传统物理机无差别,具有安全物理隔离的特点。分钟级的交付周期将提供给您实时的业务响应能力,助力您的核心业务飞速成长。本文为大家详细介绍弹性裸金属服务器的特点、优势以及与云服务器的对比等内容。
759 23
|
Java 数据库连接 数据库
Spring Boot与MyBatis的集成应用
Spring Boot与MyBatis的集成应用
|
10月前
|
数据库
三大范式的特点
第一范式确保数据库表中每列都是不可分割的基本数据项,无重复列;第二范式在满足第一范式基础上,要求每个实例被唯一标识,属性完全依赖于主键;第三范式在满足第二范式基础上,排除非主键信息的冗余,避免数据重复。
314 0
|
7月前
|
机器学习/深度学习 编解码 异构计算
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 ICCV 2023的EfficientViT 用于高分辨率密集预测的多尺度线性关注
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 ICCV 2023的EfficientViT 用于高分辨率密集预测的多尺度线性关注
158 0
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 ICCV 2023的EfficientViT 用于高分辨率密集预测的多尺度线性关注
|
存储 JSON 前端开发
JavaWeb中用来定义统一的响应结果的result类
JavaWeb中用来定义统一的响应结果的result类
548 0
|
存储 自然语言处理 语音技术
Transformers 4.37 中文文档(七十九)(3)
Transformers 4.37 中文文档(七十九)
186 1
|
存储 内存技术
MTK flash配置方法(转)
MTK flash配置方法(转)
243 1