SpringBoot和Vue跨域问题

最新推荐文章于 2025-04-20 07:50:40 发布

眸笑丶

最新推荐文章于 2025-04-20 07:50:40 发布

阅读量803

点赞数

本文链接：https://blog.youkuaiyun.com/baozi141990/article/details/113519437

版权

Vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

Spring Boot

5 篇文章

订阅专栏

本文介绍了SpringBoot项目中解决跨域问题的三种方法：全局配置跨域、使用@CrossOrigin注解以及自定义跨域过滤器。每种方法都有详细的步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Access to XMLHttpRequest at ‘http://localhost:8082/demotest_war_exploded/sayHello’ from origin ‘http://10.205.198.119:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

上面这个报错信息一般都是跨域问题，在springboot和Vue这种前后端分离的项目中，一般都会发生这种问题。对于解决跨域，有以下方法

全局配置跨域

可以通过实现WebMvcConfigurer接口然后重写addCorsMappings方法解决跨域问题。

package com.org.demotest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    static final String[] ORIGINS = new String[]{"GET", "POST", "PUT", "DELETE"};  //请求方式

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //所有的当前站点的请求地址，都支持跨域访问
                .allowedOriginPatterns("*")    // 所有的外部域都可跨域访问,这里注意2.4.0以后是allowedOriginPatterns，以前是allowedOrigins
                .allowCredentials(true)  //是否支持跨域用户凭证
                .allowedMethods(ORIGINS) //当前站点支持的跨域请求类型是什么
                .maxAge(3600);  //超是时长，单位为秒。
    }
}

使用 @CrossOrigin 注解

Controller层在需要跨域的类或者方法上加上该注解即可。这样不需要跨域访问的类或方法不添加该注解即可

@CrossOrigin(origins = "*",maxAge = 3600)

自定义跨域过滤器


// 跨域过滤器
@Component
public class CORSFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		//*号表示对所有请求都允许跨域访问
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("Success");
            return;
        }
        chain.doFilter(request, response);
    }
 
    @Override
    public void destroy() {
 
    }
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
 
    }

// 注册过滤器
@Configuration
public class CorsConfig {
 
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }