GateWay网关配置解决前端请求请求跨域

这是在项目中解决vue请求跨域的，对别的前端项目一样，复制即可用。
话不多说上代码，注意cors引的包别引错了，是reactive的包。

package com.atguigu.gulimall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsConfigurationSource;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.server.ServerWebExchange;

/**
 * @author guanghaocheng
 * @version 1.0
 * 翼以尘雾之微补益山海,荧烛末光增辉日月
 * @date 2020/12/13 16:20
 */
@Configuration
public class CorsConfig {
    
    

    @Bean
    public CorsWebFilter corsWebFilter(){
    
    
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1、配置跨域
        corsConfiguration.addAllowedHeader("*");//允许哪些头进行跨域
        corsConfiguration.addAllowedMethod("*");//允许哪些请求方式进行跨域
        corsConfiguration.addAllowedOrigin("*");//允许哪些请求来源进行跨域
        corsConfiguration.setAllowCredentials(true);//是否允许携带cookie进行跨域，否则跨域请求会丢失cookie信息

        source.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsWebFilter(source);
    }
}

如图所示：
在这里插入图片描述
正常来说这样配置网关之后，跨域问题就没了，但是如果你浏览器控制台出现了如下信息：

说明你的跨域请求的响应头的那些字段出现了重复，不应该有多个。这其实是你前端通过网关路由到的那个真正的服务也配置了跨域信息，导致的那些信息重复。只需要去网关路由到的那个微服务（注意不是网关，是通过网关路由到的真正的微服务），注释掉它原本的跨域配置。
例如我通过网关路由到了product微服务，我在网关中进行了如上配置，那么我在product微服务中就应该注释掉它的跨域配置：
在这里插入图片描述
只保留网关配置的跨域即可。

好了，开始说说跨域的原理：
跨域是浏览器对javascript访问的一种基于同源策略的限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
当一个请求是非简单请求时（什么是非简单请求在此不做赘述，请自行百度），会发送一个预检请求到服务端。它的方法是options，去询问是否允许跨域。如图：
在这里插入图片描述
如果返回状态码是403，代表不允许请求，那么第二条真正的请求就不会发送。
我们上面给网关做的配置就是让预检请求里的响应头多出一些字段，相当于我们要允许这些跨域，如图：
上图中的具体解释就是：允许来自http://localhost:8006的post请求，也允许携带cookie等内容。
我们图中的第二条请求才是真实请求，它携带了我们真正要发送的数据，例如用户名、密码、验证码等信息。

GateWay网关配置解决前端请求请求跨域

Guess you like