SpringBoot+vue项目跨域访问问题 CORS error

最新推荐文章于 2025-10-25 17:47:55 发布

原创最新推荐文章于 2025-10-25 17:47:55 发布 · 4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot

本文探讨了如何解决SpringBoot与Vue项目中的跨域访问问题，通过CORS配置实现全站允许任意域名访问，并详细介绍了在WebMVCConfig中进行的CORS和Interceptor配置。

SpringBoot+vue项目跨域访问问题 CORS error

在这里插入图片描述

在前后端分离开发中，存在跨域访问问题，我们在后端需要配置。


import com.mszlu.blog.handler.LoginInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
    @Autowired
    private LoginInterceptor loginInterceptor;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //跨域配置所有的域名ip都可以
        registry.addMapping("/**").allowedOrigins("*");
        //registry.addMapping("/**").allowedOrigins("http://localhost");
        
        //开发8080
        //registry.addMapping("/**").allowedOrigins("http://localhost:8080");
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //拦截test接口，后续实际遇到需要拦截的接口时，在配置为真正的拦截接口
        registry.addInterceptor(loginInterceptor)
                .addPathPatterns("/test")
                .addPathPatterns("/comments/create/change")
                .addPathPatterns("/articles/publish");
    }
}