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注解

?

@Configurationpublic class CorsConfig {@Beanpublic 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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {Filter.super.init(filterConfig);// 在這里添加過濾器初始化邏輯（CORS）}?@Overridepublic 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);}}?@Overridepublic void destroy() {Filter.super.destroy();// 在這里添加過濾器銷毀邏輯（如果需要）}}

??

4.實現WebMvcConfigurer接口，重寫addCorsMappings方法

?public class CorsWebMvcConfig implements WebMvcConfigurer {// ?  配置CORS映射@Overridepublic 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("*"); //這意味著允許所有類型的請求頭。}}