记录ajax请求跨域问题的三个简单解决方法

场景：

前端发给后端的请求出现跨域问题

跨域原因分析：

1）什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面的url不同即为跨域
2）为什么会出现跨域？
有这样一个约定，叫做同源策略。同源就是指具有相同的协议/protocol、主机/host和端口/port，如http://localhost:8080和http://localhost:8080就是同源。同源策略会阻止一个域的脚本和另一个域的内容进行交互，所以出现跨域问题就是因为浏览器的同源策略限制了请求，所以导致的报错。

三种解决方案：

1）注解方式：缺点是只有单个控制器生效
最简单的一种方案是在请求访问的控制器上加上注解，注意不能加在启动类上

//*号表示所有来源的请求都可以访问  里面还有许多其他的有用的配置，具体可以点进去查看
@CrossOrigin(origins = {"*"})

2）全局跨域1：返回一个新的自定义规则的CorsFilter（可与zuul网关搭配）

@Bean//加入到容器中
    public CorsFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1、配置跨域
        corsConfiguration.setAllowCredentials(true);//cookie
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }

3）全局跨域2：搭配springcloud的gateway网关使用，这是学习的时候学到的一个方法，但是不知道为什么跟zuul搭配使用的时候用不了，如果有知道的欢迎指教，多谢。

/**
 * Created by Jzs on 2020/10/28
 * 跨域解决
 */
@Configuration
public class CorsConfig {

    @Bean//加入到容器中
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);//cookie

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}