如何在 Spring Boot + Axios 中修复恼人的 CORS 问题？

修复 Spring Boot + Axios 的 CORS 问题

问题陈述

在使用 Spring Boot 构建后端服务并通过 Axios 发起前端请求时，我们遇到了恼人的跨源资源共享 (CORS) 问题。更新请求 (PUT/POST) 似乎被浏览器阻止，返回了令人讨厌的 "CORS 访问被阻止" 错误消息。尽管我们已在控制器方法中应用了 @CrossOrigin 注解，但问题依然存在。

解决方案

检查 CORS 响应头

首先，让我们使用浏览器的开发人员工具（如 Chrome DevTools）仔细检查后端响应头。我们需要确保 Access-Control-Allow-Origin 头中存在允许的源（例如 http://localhost:3000）。如果没有，请确保 Spring Boot 应用程序已正确配置为允许跨域请求。

检查控制器注解

接下来，我们需要验证 @CrossOrigin 注解是否已正确应用于更新控制器方法。该注解应位于方法签名之上，例如：

@PostMapping("/update")
@CrossOrigin(origins = "http://localhost:3000")
public ResponseEntity<User> setUserActive(@RequestBody User user) {
    // ...
}

检查安全配置

Spring Boot 默认启用了跨站点请求伪造 (CSRF) 保护，这可能会阻止来自外部来源的 POST/PUT 请求。为了解决这个问题，我们可以在 WebSecurityConfigurerAdapter 中禁用 CSRF 保护：

@Override
protected void configure(HttpSecurity http) {
    // ...
    http.csrf().disable();
}

检查 Axios 请求配置

确保 Axios 请求配置了必要的 CORS 凭证。如果请求是从不同的域名或协议发出的，则需要启用凭证：

const axiosInstance = axios.create({
  withCredentials: true
});

检查代理设置

如果后端和前端之间使用了代理服务器，请确保其已正确配置为允许 CORS 请求。

检查浏览器扩展

某些浏览器扩展（如广告拦截器）可能会干扰 CORS 请求。尝试禁用可疑扩展并重新测试应用程序。

常见问题解答

Q1：我已检查所有提到的解决方案，但问题仍然存在。有什么其他原因吗？

A1：请确保 Spring Boot 应用程序正在运行在允许 CORS 请求的端口上。此外，检查控制器的基路径是否正确。

Q2：如何处理预检请求（OPTIONS）？

A2：对于需要预检请求的方法，如 PUT/POST，请在 @CrossOrigin 注解中指定适当的 HTTP 方法：

@CrossOrigin(origins = "http://localhost:3000", methods = {RequestMethod.GET, RequestMethod.POST})

Q3：我可以在后端使用哪些 CORS 库？

A3：可以使用 spring-webcors 库或自定义实现 CORS 过滤器。

Q4：如何调试 CORS 问题？

A4：使用浏览器的开发人员工具（例如 Chrome DevTools）检查响应头和请求配置。

Q5：CORS 是否适用于所有浏览器？

A5：是的，CORS 被所有主流浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。

结论

解决 Spring Boot 和 Axios 之间的 CORS 问题需要仔细检查 CORS 响应头、控制器注解、安全配置、Axios 请求设置和潜在的代理或浏览器扩展干扰因素。通过遵循本文中概述的步骤，您应该能够顺利地解决此问题并确保您的跨域请求得到允许。请记住，了解 CORS 的基本原理和各种配置选项对于正确解决此类问题至关重要。