SpringBoot怎么实现跨域？这是前后端分离的一大点

SpringBoot实现跨域

同源策略：判断是否是同源的，主要看这三点,协议，ip，端口。

同源策略就是浏览器出于网站安全性的考虑，限制不同源之间的资源相互访问的一种政策。

比如在域名https://www.baidu.com下，脚本不能够访问https://www.sina.com源下的资源，否则将会被浏览器拦截。

跨域拦截是前端请求已经发出，并且在后端返回响应时检查相关参数，是否允许接收后端请求。

在微服务开发中，一个系统包含多个微服务，会存在跨域请求的场景。

简单的说跨域错误

浏览器会先发送一个Option请求，携带Origin源网址，请求目标网址，网址会返回该网站所支持的请求方式，然后才是准备请求方式与所支持请求方式是否匹配，不匹配就会报跨域请求错误。

方式一、最简单方法加注解 ，让注解反射替我们完成跨域功能

@CrossOrigin

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
    /** @deprecated */
    @Deprecated
    String[] DEFAULT_ORIGINS = new String[]{"*"};
    /** @deprecated */
    @Deprecated
    String[] DEFAULT_ALLOWED_HEADERS = new String[]{"*"};
    /** @deprecated */
    @Deprecated
    boolean DEFAULT_ALLOW_CREDENTIALS = false;
    /** @deprecated */
    @Deprecated
    long DEFAULT_MAX_AGE = 1800L;

    @AliasFor("origins")
    String[] value() default {};

    @AliasFor("value")
    String[] origins() default {};

    String[] allowedHeaders() default {};

    String[] exposedHeaders() default {};

    RequestMethod[] methods() default {};

    String allowCredentials() default "";

    long maxAge() default -1L;
}

直接单独使用浏览器打开这个html文件，掏出我们的测试网页

测试按钮，请开启f12
测试


 

html

没配置跨域情况如下

配置跨域后，成功获取数据

方法二、使用@CrossOrigin需要一个类一类加，假如需要全部添加跨域处理，则需要创建一个配置类

写法一

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.Arrays;

/**
 * Cros协议的配置类。
 * 继承WebMvcConfigurerAdapter，并且重写方法addCorsMappings。
 * addCorsMappings方法是用于增加Cros协议配置的方法。默认的实现是空实现。也就是说，在默认的配置环境中，是不进行Cros协议的配置的。
 */
@Configuration
public class CorsConfig {


    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 所有的外部域都可跨域访问。 如果是localhost则很难配置，因为在跨域请求的时候，外部域的解析可能是localhost、127.0.0.1、主机名
        corsConfiguration.setAllowedOriginPatterns(Arrays.asList("*"));

        corsConfiguration.addAllowedHeader("*");
        // 当前站点支持的跨域请求类型是什么。
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(3600L);
        // 是否支持跨域用户凭证
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 所有的当前站点的请求地址，都支持跨域访问。
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }



}

写法二 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * Cros协议的配置类。
 * 继承WebMvcConfigurerAdapter，并且重写方法addCorsMappings。
 * addCorsMappings方法是用于增加Cros协议配置的方法。默认的实现是空实现。也就是说，在默认的配置环境中，是不进行Cros协议的配置的。
 */
@Configuration
public class CrosConfiguration implements WebMvcConfigurer {

    /**
     * 就是注册的过程，注册Cors协议的内容。
     * 如： Cors协议支持哪些请求URL，支持哪些请求类型，请求时处理的超时时长是什么等。
     * @param- CorsRegistry - 就是用于注册Cros协议内容的一个注册器。
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")// 所有的当前站点的请求地址，都支持跨域访问。
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 当前站点支持的跨域请求类型是什么。
                .allowCredentials(true) // 是否支持跨域用户凭证
                .allowedOrigins("*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置，因为在跨域请求的时候，外部域的解析可能是localhost、127.0.0.1、主机名
                .maxAge(3600); // 超时时长设置为1小时。 时间单位是秒。
    }

}

测试同上