跨域Cros Access-Control-Allow-Origin Access to XMLHttpRequest at from origin has been blocked by Cros

跨域问题

背景

做前后端分离的项目，就会涉及到跨域问题，处理的方案有很多。如果项目小，controller少(只有一两个，基本不存在，一般能用MVC的都是比较大的项目)，直接在Controller上面添加注解@CrossOrigin(origins={""}),将前端的路径填入即可，还有一种常用的解决方案就是配置全局跨域类ConfigurerAdapter(见DruidMall config目录下)，在配置类里面定义一个返回 CorsFilter类型的Bean，在Bean上面加上@ConfigurationProperties(prefix = “login”, ignoreUnknownFields = true) 这个注解，就可以读取application.yml文件中 login开头的配置文件(配置文件中可以配置origin等信息，这样以后修改origin就不需要重新编译启动项目)

跨域

为什么会出现跨域的问题

出于浏览器的同源策略限制问题(出于安全考虑)，同源限制策略是一种约定，如果缺少了同源策略，浏览器的功能会受到影响。同源策略会阻止一个域的JavaScript脚本与另一个域的资源进行交互。

同源

协议 http/https

源 aa.com

端口 8080

但凡上面有一个与当前的url不一致，就是跨域

非同源限制

1.无法读取网页的cookies

2.无法解除非同源的dom树

3.无法向非同源发送ajax请求

跨域解决方案1

配置在Controller 上面的跨域注解，一般只需要将前端项目的路径写在这个地方就可以了

@CrossOrigin(origins = {"http://localhost:4300","http://localhost:4320","http://localhost:3000")

跨域解决方案2

配置跨域类(我这里是允许所有的origin的所有的方法都可以访问，目前还在develop阶段)

@Configuration
@EnableWebMvc
public class ConfigurerAdapter implements WebMvcConfigurer {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

当然上面都是在后端进行处理的

跨域处理参考 https://blog.csdn.net/qq_38128179/article/details/84956552