vue.js - 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";
    }
}

Answer 2

跨域问题（CORS）通常发生在前端应用尝试访问不同源（即协议、域名、端口任一不同）的服务器资源时。在你的情况中，尽管你在Spring Boot后端已经配置了CORS，但问题可能仍然存在，这可能是由于几个不同的原因。以下是一些解决步骤和检查点：

1. 确认CORS配置是否正确：
   你的CORS配置看起来是基本正确的，但有一些小地方可以调整或确认。

   • 确保@CrossOrigin("*")注解或WebMvcConfigurer的实现没有被其他配置或注解（如方法级别的CORS注解）覆盖。
   • 尝试在WebMvcConfigurer中更明确地设置允许的源，而不是使用"*"，虽然这通常应该工作，但有时候明确指定可以避免一些潜在的问题。
2. 检查Spring Boot的版本：
   不同的Spring Boot版本可能对CORS的处理略有不同。确保你查看的CORS配置文档与你正在使用的Spring Boot版本相匹配。
3. 检查Spring Security配置（如果使用了）：
   如果你的Spring Boot应用集成了Spring Security，并且进行了安全配置，那么这些配置可能会覆盖CORS设置。确保你的安全配置没有阻止CORS请求。
4. 浏览器缓存：
   有时浏览器缓存可能会导致CORS配置更改看起来没有生效。尝试清除浏览器缓存或使用无痕/隐私模式重新加载页面。

5. Vue和Axios的CORS问题：

   • 跨域问题通常是在服务器端配置的，但客户端（如Vue和Axios）也可能影响请求的行为。确保你的Axios请求没有设置任何会干扰CORS的自定义头部。
   • 既然你已经尝试了在Vite中设置代理，但似乎没有成功，请检查你的Vite配置是否完全正确，并且确保你正在开发模式下运行Vue应用，因为代理通常只在开发模式下有效。
6. 查看浏览器控制台和网络日志：
   浏览器控制台和网络日志通常会提供关于CORS错误的详细信息，包括被拒绝的请求和原因。这可以帮助你更准确地诊断问题。
7. 使用Postman或Curl测试：
   使用Postman或Curl等工具直接向Spring Boot后端发送请求，以确认后端是否实际上在处理CORS请求时存在问题。这可以帮助你排除前端或Vite配置的问题。

如果以上步骤都不能解决问题，可能需要更详细地检查你的代码和配置，或者考虑在Spring Boot的日志中增加更详细的调试信息，以查看CORS请求是如何被处理的。