Gulimall学习：通过SpringBoot解决跨域CORS问题

本是古典何须时尚 2022-12-08 05:28 160阅读 0赞

# 1. 什么是跨域问题 #

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。  
所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。举例如下：  
（1）http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）  
（2）http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）  
（3）http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）  
（4）http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）  
（5）http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）  
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。  
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

# 2. 调接口出现如下问题（CORS） #

Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy:
    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

# 3. 解决：加入如下配置代码 #

package com.atguigu.gulimall.gateway.conf;
    
    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 QuS
     * @date 2020/9/18 15:07
     */
    @Configuration
    public class GulimallCorsConfiguration {
    
        @Bean
        public CorsWebFilter corsWebFilter() {
    
            UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            //配置跨域
            /*允许服务端访问的客户端请求头*/
            corsConfiguration.addAllowedHeader("*");
            /*允许访问的方法名,GET POST等*/
            corsConfiguration.addAllowedMethod("*");
            /*允许访问的客户端域名*/
            corsConfiguration.addAllowedOrigin("*");
            /*是否允许请求带有验证信息*/
            corsConfiguration.setAllowCredentials(true);
            urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsWebFilter(urlBasedCorsConfigurationSource);
            
        }
    }

# 4. 注意 #

只能配置一个跨域，如果配置了多个跨域，会报如下错误，此时需要删除一个

Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: 
    The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8001, http://localhost:8001', but only one is allowed.