关于前后端分离，跨域问题的解决方法

浅浅的花香味﹌ 2024-04-23 20:06 61阅读 0赞

**前后端分离跨域问题**

##### 什么是跨域 #####

（1）浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 。前后端分离开发中，需要考虑 ajax 跨域的问题。

**（2）跨域的本质：浏览器对Ajax请求的一种限制**

（3）这里我们可以从服务端解决这个问题

**方式一：**  
直接在后端接口controller类上添加注解：@CrossOrigin //跨域

**方式二：**  
在项目中的 config 包下新建一个 CorsConfig 配置类：

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;
    
    @Configuration
    public class CorsConfig {
        
    
        // 当前跨域请求最大有效时长。这里默认1天
        private static final long MAX_AGE = 24 * 60 * 60;
    
        private CorsConfiguration buildConfig() {
        
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*"); // 1.设置访问源地址
            corsConfiguration.addAllowedHeader("*"); // 2.设置访问源请求头
            corsConfiguration.addAllowedMethod("*"); // 3.设置访问源请求方法
            corsConfiguration.setMaxAge(MAX_AGE);
            return corsConfiguration;
        }
    
        // 也可以只写成下面一个方法
        @Bean
        public CorsFilter corsFilter() {
        
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig()); // 4.对接口配置跨域设置
            return new CorsFilter(source);
        }
    }

这样前端在调用相应的接口时，控制台就不会报错了。

**方式三：**  
使用 httpclient

**方式四：**  
通过 gateway 网关