Spring Boot配置跨域

同源策略

很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。

同源策略是由Netscape提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是JSONP，JSONP虽然能解决跨域但是有一个很大的局限性，那就是只支持GET请求，不支持其他类型的请求，而今天我们说的CORS（跨域源资源共享）（CORS，Cross-origin resource sharing）是一个W3C标准，它是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，这是JSONP模式的现代版。

在Spring框架中，对于CORS也提供了相应的解决方案，今天我们就来看看SpringBoot中如何实现CORS。

前端请求

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to nginx!</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div id="myDiv"></div>
    <script>
        $(document).ready(function () {

           $.ajax({
                url: "http://localhost:8080/CrossOrigin",
                type:"post",
                async: false,
                success:function(data){
                    $("#myDiv").html(data);
                }
            });
           

        });
    </script>
</body>

</html>

配置后端

/**
 * @author laughing
 * @date 2020/9/26
 * @site https://lisen.cc
 */
@RestController
public class CorsController {

    /**
     * 方法配置跨域
     * @return String
     */
    @RequestMapping("/CrossOrigin")
    public String crossOrigin(){
        return "crossOrigin";
    }

}

打开前端页面，我们可以看一下，报错信息如下，也就是出现了跨域

通过CrossOrigin配置跨域

我们可以将@CrossOrigin注解到方法上，实现跨域请求，我们对后端方法改造如下：

/**
 * @author laughing
 * @date 2020/9/26
 * @site https://lisen.cc
 */
@RestController
public class CorsController {

    /**
     * 方法配置跨域
     * @return String
     */
    @RequestMapping("/CrossOrigin")
    @CrossOrigin(origins = "http://localhost:1234")
    public String crossOrigin(){
        return "crossOrigin";
    }

}

通过CorsFilter配置跨域

继续后端改造

修改yaml文件，增加跨域配置信息

#配置跨域
cors:
  allowedOrigin:
 - http://localhost:1234
  allowCredentials:
 - true
  allowMethods:
 - GET
 - POST
 - PUT
 - DELETE
  maxAge:
 7200
  path:
 /**

增加CrosFilter配置文件

package cc.lisen.cors.config;

import lombok.Getter;
import lombok.Setter;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.List;


/**
 * 跨域配置
 *
 * @author laughing
 * @date 2020/9/26
 * @site https://lisen.cc
 */
@Configuration
@ConfigurationProperties(prefix = "cors")
@Getter
@Setter
public class CorsFilterConfig {

    private boolean allowCredentials;
    private List<String> allowedOrigin;
    private List<String> allowMethods;
    private long maxAge;
    private String path;

    /**
     * 配置跨域
     *
     * @return CorsFilter
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        this.allowedOrigin.forEach(corsConfiguration::addAllowedOrigin);
        this.allowMethods.forEach(corsConfiguration::addAllowedMethod);
        corsConfiguration.setAllowCredentials(this.allowCredentials);
        corsConfiguration.setMaxAge(this.maxAge);
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration(this.path, corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

}

增加请求

/**
 * @author laughing
 * @date 2020/9/26
 * @site https://lisen.cc
 */
@RestController
public class CorsController {

    /**
     * 方法配置跨域
     * @return String
     */
    @RequestMapping("/CrossOrigin")
//    @CrossOrigin(origins = "http://localhost:1234")
    public String crossOrigin(){
        return "crossOrigin";
    }

}

再次请求，可以发现仍然能够正常访问

通过WebMvcConfigurer配置跨域

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/cors/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("http://localhost:8081");
    }
}