前后端分离跨域问题解决方案

Vue和SpringBoot的跨域问题的4中解决方案

跨域问题产生的原因：浏览器的保护机制，同源策略协议，域名，端口；三个中有一个不同就会产生跨域问题

解决方案（后端）：

1.@CrossOrigin注解：

在目标方法上使用@CrossOrigin注解

@CrossOrigin
     @GetMapping("/captcha")
     public void captcha(HttpServletResponse response, HttpServletRequest request) throws IOException {
         SpecCaptcha captcha = new SpecCaptcha(150,40);
         String text = captcha.text();
         System.out.println(text);
         captcha.out(response.getOutputStream());
     }

2.在配置类中添加CORS过滤器

在配置类中写过滤器一般用@bean注解

@Configuration
 public class CorsConfig {
     @Bean
     public CorsFilter corsFilter(){
 //        创建一个CorsConfiguration对象，用于存储CORS配置。
         CorsConfiguration corsConfiguration = new CorsConfiguration();
         corsConfiguration.addAllowedOrigin("*");
         corsConfiguration.addAllowedMethod("*");
         corsConfiguration.addAllowedHeader("*");
 //        创建一个UrlBasedCorsConfigurationSource对象，用于存储基于URL的CORS配置
         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 //        将CORS配置注册到所有URL模式（/**）。这意味着对于所有请求，都应用这个CORS配置。
         source.registerCorsConfiguration("/**",corsConfiguration);
         return new CorsFilter(source);
     }
 }

3.创建一个自定义CROS过滤器（实现Filter接口）

package com.kfm.bisheserve.filter;
 ​
 import javax.servlet.*;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 ​
 /**
  * @author 27359
  * date:2024/5/29
  */
 public class CorsFilter implements Filter {
     @Override
     public void init(FilterConfig filterConfig) throws ServletException {
         Filter.super.init(filterConfig);
         // 在这里添加过滤器初始化逻辑（CORS）
     }
 ​
     @Override
     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
 //        HttpServletResponse是ServletResponse接口的一个实现类，专门用于处理HTTP响应
         HttpServletResponse httpResponse = (HttpServletResponse) response;
         //设置CORS响应头
         httpResponse.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名访问
         httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); // 允许的HTTP方法
         httpResponse.setHeader("Access-Control-Max-Age", "3600"); // 预检请求的缓存时间
         httpResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN"); // 允许的请求头
 ​
         // 如果是预检请求（OPTIONS请求,一般是浏览器自己发送的请求），直接返回成功
         if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) request).getMethod())) {
             httpResponse.setStatus(HttpServletResponse.SC_OK);
         } else {
             // 如果是其他请求，继续执行过滤器链,chain.doFilter()是Java Servlet API中的方法调用，用于在过滤器链中继续执行下一个过滤器
             chain.doFilter(request, response);
         }
     }
 ​
     @Override
     public void destroy() {
         Filter.super.destroy();
         // 在这里添加过滤器销毁逻辑（如果需要）
     }
 }

 ​

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

 public class CorsWebMvcConfig implements WebMvcConfigurer {
 //    配置CORS映射
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")  //这个映射适用于所有URL模式（/**），表示对于所有请求，都应用这个CORS配置
                 .allowedOriginPatterns("/**")  //这意味着允许所有域名的请求访问你的后端服务。
                 .allowedMethods("*")  //这意味着允许所有类型的HTTP请求（如GET、POST、PUT、DELETE等）。
                 .allowCredentials(true) //这通常与Access-Control-Allow-Origin响应头一起使用，以允许跨域请求携带cookie。
                 .maxAge(3600)  //这意味着浏览器可以缓存预检请求的结果，避免在每次跨域请求时都发送预检请求
                 .allowedHeaders("*"); //这意味着允许所有类型的请求头。
     }
 }