当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 6:20:03

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("*"); //这意味着允许所有类型的请求头。}}