IT博客汇 | 解决前后端分离项目中的跨域问题，通过后端进行处理

解决前后端分离项目中的跨域问题，通过后端进行处理

JayHrn发表于 2023-12-19 09:35:28

随着学习的深入，越来越多的技术出现在我的视野中。现在越来越多的开发都是采用前后端分离模式，于是在学习的过程中也会出现许多的问题，就像今天记录的跨域问题。当然今天这个主要是为了记录后端如何解决跨域，毕竟现在网络上也有许多的解决跨域的方法（前端处理、后端处理）。

当然对于跨域问题的出现，大家可以自行去仔细研究下，这里我将会给出后端处理跨域的解决方案。

处理跨域

在后端新建一个文件夹config，后面项目的需要的一些配置类都可以写在该文件夹里面。

新建一个GlobalCorsConfig类

package com.example.aircraftBackend.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @Author JayHrn
 * @Date 2023-02-28 17:35
 * 全局跨域配置
 */
@Configuration
public class GlobalCorsConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //1. 设置哪些原始域
        config.addAllowedOriginPattern("*");
        // 是否允许发送Cookie信息
        config.setAllowCredentials(Boolean.TRUE);
        // 开放哪些Http方法，允许跨域访问
        config.addAllowedMethod("*");
        // 允许HTTP请求中的携带哪些Header信息
        config.addAllowedHeader("*");
        // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
        config.addExposedHeader("*");
        //2. 添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        //3. 返回新的CorsFilter
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(corsConfigurationSource));
        // 在有其他拦截器的时候，通过bean.setOrder(0)，设置加载顺序
        // 设置为第一
        bean.setOrder(0);
        return bean;
    }
}

这里的注释还是比较清晰的，可以自行查阅。

到这里我们的跨域问题其实就已经解决了。