SpringCloud网关跨域问题

最近开发微服务项目用到了网关，但是前端请求资源一直报跨域不成功的错误，但是我明明就在后端代码中设置了跨域，下面一起来看看两种方案

没有网关时的跨域设置

public class VueApplication {

	public static void main(String[] args) {
		SpringApplication.run(VueApplication.class, args);
	}

	private CorsConfiguration buildConfig() {
		CorsConfiguration corsConfiguration = new CorsConfiguration();
		corsConfiguration.addAllowedHeader("*");
		corsConfiguration.addAllowedOrigin("*");
		corsConfiguration.addAllowedMethod("*");
		corsConfiguration.setAllowCredentials(true);
		return corsConfiguration;
	}

	@Bean
	public CorsFilter corsFilter() {
		System.out.println("=============== 设置跨域过滤器 ================");
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", buildConfig());
		return new CorsFilter(source);
	}

}

之前没有网关设置跨域时都是直接在启动类上加两个方法就可以跨域成功，后面加了网关后将这段代码放入网关的启动类中不起作用了，我现在也不知道是什么原因，运行时就是报跨域不成功，我在前端vue里也设置了代理服务，然鹅都没有用

加入网关后设置跨域

@Configuration
public class RouteConfiguration {
    @Bean
    public WebFilter corsFilter() {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                ServerHttpResponse response = ctx.getResponse();
                HttpHeaders headers = response.getHeaders();
                headers.add("Access-Control-Allow-Origin", "*");
                headers.add("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
                headers.add("Access-Control-Max-Age", "3600");
                headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
                headers.add("Access-Control-Expose-Headers", "Location");
                headers.add("Access-Control-Allow-Credentials", "true");
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
}

把这段代码在网关服务中配置后跨域就成功了

总结

在vue中，发送请求时我其实只设置了GET和POST方法，但是在谷歌浏览器中查看请求头信息时发现请求方法是OPTIONS，我第一次遇到这个问题，找了很多博客，但是都没有解决，直到看到了跨域这样设置，一定要注意，在这里设置请求头时，一定要加前端自己设置的请求头，不然会报请求头不允许