前后端分离开发中的跨域问题

ゞ浴缸里的玫瑰 2022-11-22 05:20 175阅读 0赞

## 跨域问题描述： ##

通过一个地址去访问另外一个地址，两个地址的url中的3个地方只要有任何一个不同，那就会引起跨域问题，它们分别是：访问协议、ip地址、端口号

### 解决方案1： ###

在Controller类上面添加@CrossOrigin，例如：

![在这里插入图片描述][20201103173252759.png_pic_center]  
**出现的问题：**

当你在浏览器中点击f12，在网络中查看请求的时候，你会发现浏览器向同一个请求地址发送两次请求，第一次的请求方式是：OPTIONS，第二次才会按照我们设定的请求方式发起正式请求，如下图：

![在这里插入图片描述][202011031728282.png_pic_center]  
你可以这样理解，第一次请求(请求方式为OPTIONS)的目的是测试接口是否能够调通，后端不会给它返回任何的数据，而第二次请求才是真正的请求，然后响应头中就会收到数据

**解决跨域问题方案2：**

使用gateway网关来解决，直接在网关中添加配置类，但是需要注意如果使用gateway网关的跨域解决方案，那就不需要在每个模块的Controller类上面添加@CrossOrigin跨域注解了，如果加上就会出错，毕竟两次跨域相等于没有跨域，然后跨域配置文件是固定配置，如果需要使用的时候直接复制就可以了，配置类如下：

@Configuration
    public class CorsConfig { 
        @Bean
        public CorsWebFilter corsFilter() { 
            CorsConfiguration config = new CorsConfiguration();
            config.addAllowedMethod("*");
            config.addAllowedOrigin("*");
            config.addAllowedHeader("*");
    
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
            source.registerCorsConfiguration("/**", config);
    
            return new CorsWebFilter(source);
        }
    }

[20201103173252759.png_pic_center]: /images/20221120/d190e3ecbb994a068111a0c0c686d4dd.png
[202011031728282.png_pic_center]: /images/20221120/c882d4cc28c348c28fa90fb978f6293b.png