跨域问题的解决

跨域问题的原因

首先这是浏览器的保护机制。其实后端是可以接收到请求的。但是其相应会被浏览器所拦截。这是因为浏览器的同源策略

同源策略是浏览器很重要的安全策略。限制不同源直接的交互。有效避免浏览器层面的工具。不同意的请求是无法交互的。只有符合同源策略的请求才能正常的访问

所谓同源就是协议、域名、端口3个都相同

比如vue：http://localhost:4173/

springboot：http://localhost:9090/

其中端口号不同，那就触发了包含机制

后端解决

可以在后端进行解决。这里提供三种方式，其原理是相同的。都是通过CORS策略。有HTTP头组成。就是在请求头添加配置，允许浏览去读相应。这样就解决问题。

下面是三种方法

1. 在目标方法上添加@CrossOrigin注解即可

   @CrossOrigin
   @GetMapping("/")
   public Result hello() {
       return Result.success();
   }
   

2. 方法过多时可以添加统一的COS过滤器

   @Configuration
   public class CorsConfig {
       @Bean
       public CorsFilter corsFilter() {
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           CorsConfiguration corsConfiguration = new CorsConfiguration();
           corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
           corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
           corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
           source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
           return new CorsFilter(source);
       }
   }
   

3. 实现WebMvcConfigurer接口，重写addCorsMappings方法

   @Configuration
   public class CorsConfiguration implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOriginPatterns("*")
                   .allowedMethods("GET","PUT","POST","DELETE","HEAD")
                   //运行携带cookie
                   .allowCredentials(true)
                   //浏览器免询问时间，提高效率
                   .maxAge(3600)
                   .allowedHeaders("*");
       }
   }
   

前端解决

当然也可以用前端解决，这里可以看一下前面的文章Vue3+ElementPlus大事件 - 韩熙隐ario - 博客园
这里还是非常非常非常建议用前端的，不容易出错。刚写的智能招聘就是这个解决的跨域问题。刚开始时用到后端解决，开发过程中没问题，但是用yarn打包以后就不行了。前端的事儿还是前端解决好！！！