同源策略

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

前端请求

    Welcome to nginx!

配置后端

/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController {    /**     * 方法配置跨域     * @return String     */    @RequestMapping("/CrossOrigin")    public String crossOrigin(){        return "crossOrigin";    }}

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

通过CrossOrigin配置跨域

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

/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController {    /**     * 方法配置跨域     * @return String     */    @RequestMapping("/CrossOrigin")    @CrossOrigin(origins = "http://localhost:1234")    public String crossOrigin(){        return "crossOrigin";    }}

通过CorsFilter配置跨域

继续后端改造

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

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

1. 增加CrosFilter配置文件

package org.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://www.lisen.org */@Configuration@ConfigurationProperties(prefix = "cors")@Getter@Setterpublic class CorsFilterConfig {    private boolean allowCredentials;    private List allowedOrigin;    private List 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);    }}

1. 增加请求

/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController {    /**     * 方法配置跨域     * @return String     */    @RequestMapping("/CrossOrigin")//    @CrossOrigin(origins = "http://localhost:1234")    public String crossOrigin(){        return "crossOrigin";    }}

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

代码已上传到码云

下载代码

git clone https://gitee.com/lisen0629/lisen_org.git

使用

进入克隆的位置，执行命令进入对应工程
cd cors