什么是跨域以及如何去解决？

前言

最近发现很多新手都不了解什么是跨域，以及怎么去解决跨域的问题，因此写了这篇文章

什么是跨域？

假如启动两个工程，一个vue，一个springboot工程，如果现在我想要用vue去调用springboot的后端接口，后端接收到请求并且返回结果了，但是浏览器把这个响应拦截了。

那么为什么浏览器要这么干呢？这是因为浏览器的同源策略。

同源策略：浏览器中的一种安全策略，为了限制不同源之间的交互，避免一些浏览器之间的攻击，不同源的请求是无法进行交互来保证安全。

那么怎么才算是同源呢？ 协议、域名、端口都相同就是同源

例子
vue：http://localhost:8080
springboot：http://localhost:8081/xing

他们两个的协议都是http，域名都是localhost，但是端口不一致，一个8080，一个8081，所以他们不是同源的，就导致了跨域。

如何解决跨域问题

讲如何解决这个问题前，要先解释一下CORS策略
CORS策略: （Cross Origin Resource Sharing）跨域资源共享，其实就是由一系列http头组成的，http头决定浏览器是否阻止前端代码来读取由跨域请求过来的响应。所以我们只要在这些http头中添加一些配置让前端读取这些响应就可以了。

在Spring Boot项目中解决跨域的三种方法

1.在目标方法上添加@CrossOrigin

2.添加CORS过滤器

添加一个过滤器

@Configuration
public class CorsConfigure {
    @Bean
    public CrosFilter crosFilter(){
        org.springframework.web.cors.CorsConfiguration = new CorsConfiguration();
        //设置http头信息，是否阻止浏览器对响应的读取，允许哪些请求通过
        //设置允许哪些域来访问
        corsConfiguration.addAllowedOrigin("*");
        //设置允许哪些头字段
        corsConfiguration.addAllowedHeader("*");
        //设置允许哪些请求方式，例如（get,post）
        corsConfiguration.addAllowedMethod("*");
        //创建source对象
        urlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsConfigure(source);
    }
}

3.实现接口WebMvcConfigurer接口，重写addCrosMappings方法(常用)

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置映射
        registry.addMapping("/**")
                //设置允许哪些域来
                .allowedOrigins("*")
                //设置允许哪些方法
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")
                //是否可以携带cookie
                .allowCredentials(true)
                //设置有效期
                .maxAge(3600)
                .allowedHeaders("*");
    }
}