Vue + Axios跨域请求Spring Boot后端失败，如何解决？

Question

Vue中用axios.get('http://localhost:8080/article/list')访问本机的springboot项目，报跨域错误。

在controller类中注解了CrossOrign,没用

@CrossOrigin("*")
@RestController
@RequestMapping("/article")

重写了WebMvcConfigurer的addCorsMappings也没用。

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*")
                .allowedOriginPatterns("*")
                .allowedMethods("GET")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

在vite.config.js写server代理也没用

server: {
    proxy: {
      '/': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }

Answer 1

回答：你的跨域设置的有问题，只需要配置跨域类或者在controller里面加CrossOrigin注解，不需要两个都加，主要是你两个都配错了；你可以考虑只配一个，它们两个分别有各自的优先级，一起配不必要的

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

@RestController
@CrossOrigin(origins = "*")
public class HelloController {
    @RequestMapping("/hello")
    public String hello() {
        return "hello world";
    }
}