前后端分离项目遇到的跨域问题解决方案(后端为主)

文章目录

  • 什么是跨域问题?
    • [第一种方式 ⇒ 注解解决方案:](#第一种方式 ⇒ 注解解决方案:)
    • [第二种方式 ⇒ 使用 CorsFilter 方法解决:](#第二种方式 ⇒ 使用 CorsFilter 方法解决:)
    • [第三种方式 ⇒ 实现 WebMvcConfigure 接口,添加映射(个人推荐)](#第三种方式 ⇒ 实现 WebMvcConfigure 接口,添加映射(个人推荐))

什么是跨域问题?

先说问题:

在前后端接口设置正常的情况下,却不能正常使前后端进行通讯。这是为什么?就产生了以下问题:跨域。
跨域(Cross-Origin Resource Sharing,简称 CORS)是一种安全策略,用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略(Same-Origin Policy)的一部分,旨在防止恶意网站通过一个域的网页访问另一个域的敏感数据。
由于浏览器实施的同源策略(Same Origin Policy),这是一种基本的安全协议,它确保了浏览器的稳定运行。没有同源策略,浏览器的许多功能可能无法正常工作。整个Web体系建立在同源策略之上,浏览器是这一策略的具体实现。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。所谓同源,指的是两个页面必须具有相同的协议(protocol)、域名(host)和端口号(port)

第一种方式 ⇒ 注解解决方案:

我们需要在方法前面,加上注解 @CorsFilter 注解,即可解决。(注意!注意!是方法,而不是类上面哦 !!!!)

第二种方式 ⇒ 使用 CorsFilter 方法解决:

代码如下:

复制代码
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);

        return new org.springframework.web.filter.CorsFilter(source);
    }

}

第三种方式 ⇒ 实现 WebMvcConfigure 接口,添加映射(个人推荐)

代码如下:

复制代码
package com.xiao.Config;

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 CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true) // 允许保存到 cookie
                .maxAge(3600);          // cookie 保存的时间 xx 秒
    }
}
相关推荐
小枫编程2 小时前
Spring Boot 与微服务网关集成问题:Zuul、Spring Cloud Gateway 与鉴权策略
spring boot
麦兜*4 小时前
MongoDB 与 GraphQL 结合:现代 API 开发新范式
java·数据库·spring boot·mongodb·spring·maven·graphql
paopaokaka_luck4 小时前
绿色环保活动平台(AI问答、WebSocket即时通讯、协同过滤算法、Echarts图形化分析)
java·网络·vue.js·spring boot·websocket·网络协议·架构
齐穗穗4 小时前
springboot集成websocket
spring boot·后端·websocket
老华带你飞5 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
小熊学Java6 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
记得开心一点嘛12 小时前
手搓Springboot
java·spring boot·spring
shallwe小威16 小时前
SpringBoot集成ElasticSearch
数据库·spring boot·elasticsearch
Q_Q196328847517 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php