[Spring Cloud] 搭建Vue2与网关、微服务通信并配置跨域

在Spring Cloud项目中，你可能需要配置API网关（如Spring Cloud Gateway）与Vue 2前端通信并处理跨域问题。以下是一个简化的例子，展示了如何配置Spring Cloud Gateway以允许跨域请求。

1. 在Spring Cloud Gateway中配置跨域请求：

@Configuration
public class CorsConfiguration {
 
    @Bean
    public WebFilter corsFilter() {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                HttpHeaders requestHeaders = request.getHeaders();
                ServerHttpResponse response = ctx.getResponse();
                HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod();
                HttpHeaders headers = response.getHeaders();
                headers.setAccessControlAllowOrigin(requestHeaders.getOrigin());
                headers.setAccessControlAllowMethods(Arrays.asList(requestMethod.name()));
                headers.setAccessControlAllowCredentials(true);
                headers.setAccessControlAllowHeaders(Arrays.asList(requestHeaders.toSingleValueMap().keySet()));
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
}

2. 在Vue 2前端，确保你的请求是跨域的。例如，使用axios时，你可以配置一个拦截器来添加必要的头信息：

// Vue 2 项目中的 axios 配置
axios.defaults.baseURL = 'http://your-gateway-url';
axios.defaults.withCredentials = true; // 如果需要的话
 
// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 可以在这里设置跨域请求的头部信息
    config.headers['Content-Type'] = 'application/json';
    return config;
}, error => {
    return Promise.reject(error);
});
 
// 示例请求
axios.get('/your-service-endpoint')
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

以上代码展示了如何在Spring Cloud Gateway中配置一个简单的跨域请求处理器，并在Vue 2应用中使用axios发送跨域请求。确保替换http://your-gateway-url和/your-service-endpoint为你的网关URL和服务端点。