当前位置：首页 > article >正文

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

article 2025/2/23 12:32:09

文章目录

什么是跨域问题？
- 第一种方式 ⇒ 注解解决方案：
- 第二种方式 ⇒ 使用 CorsFilter 方法解决：
- 第三种方式 ⇒ 实现 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 秒
    }
}

查看全文

http://www.kler.cn/a/287270.html