Angular11与Spring Boot Gradle(JPA)前后端交互时CORS跨域问题的解决方法咨询

嘿，作为全栈新手遇到这个问题太正常了——这是浏览器的同源策略在搞鬼！你的前端跑在localhost:4200，后端在localhost:8082，属于不同的源，浏览器会默认阻止这种跨域请求，除非后端明确允许。下面给你几种靠谱的解决办法，按推荐程度排序：

1. 全局CORS配置（推荐，一次性搞定整个应用） #

这种方式适合给整个Spring Boot应用开启跨域支持，不用每个控制器都单独设置。创建一个配置类：

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 {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有接口路径
                .allowedOrigins("http://localhost:4200") // 允许你的Angular前端源
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的HTTP方法，别忘了OPTIONS（浏览器预检请求会用）
                .allowedHeaders("*") // 允许所有请求头
                .allowCredentials(true); // 如果需要携带Cookie等凭证的话开启
    }
}

写完之后重启你的Spring Boot服务，这样所有接口都能接受来自localhost:4200的请求了。

2. 控制器/方法级别配置（针对单个接口） #

如果你只想给/addTodo这个接口单独开跨域，可以直接在方法或者控制器类上加@CrossOrigin注解：

// 在方法上添加
@PutMapping(path="/addTodo" ,consumes=MediaType.APPLICATION_JSON_VALUE)
@CrossOrigin(origins = "http://localhost:4200") // 这里指定允许的源
public ResponseEntity<Todo> addTodo(@RequestBody Todo todo) {
 todoservice.addTodos(todo);
 return new ResponseEntity<Todo>(todo,HttpStatus.OK);
}

或者给整个控制器类加，这样这个控制器下的所有接口都生效：

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class TodoController {
    // 你的接口方法...
}

3. 额外小提醒 #

• 确保你的Angular请求里，Content-Type是application/json（你已经用JSON.stringify(todo)了，这点没问题，且后端的consumes=MediaType.APPLICATION_JSON_VALUE也对应上了，做得很好）
• 如果后续部署到生产环境，记得把allowedOrigins改成你的前端实际域名，比如"https://your-frontend-domain.com"，不要用"*"（除非你真的允许所有源访问，这在生产环境不太安全）

做完上面的配置，重启后端，再试试你的Angular请求，应该就能正常调用了！

内容的提问来源于stack exchange，提问作者Developer