Angular+Spring项目PUT请求出现CORS跨域错误求助

看起来你的问题出在两个核心点上：Spring默认CORS配置未包含PUT方法，以及前后端的参数传递方式不匹配。咱们一步步拆解解决：

1. 修复CORS配置，明确允许PUT及预检请求 #

你当前的CORS配置registry.addMapping("/**");仅启用了基础CORS支持，但Spring WebMvcConfigurer的默认规则只允许GET、HEAD、POST三种HTTP方法，PUT方法不在默认允许列表内——这就是PUT请求触发No 'Access-Control-Allow-Origin'错误的直接原因。

修改你的CORS配置类，明确指定允许的方法和必要的CORS属性：

package com.aon04.backend.configuration;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200") // 生产环境替换为实际前端域名，不要用*
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 必须包含OPTIONS（预检请求）和PUT
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

注意：allowedOrigins("*")在生产环境存在安全风险，建议替换成你的前端实际域名（比如Angular默认的http://localhost:4200）。另外，OPTIONS是浏览器发送预检请求的必要方法，一定要加入允许列表。

2. 修正前后端参数传递不匹配的问题 #

你的前端PUT请求发送的是JSON格式数据：

updateExamById(id, exam: Examen): Observable<Examen> {
  return this.http.put<Examen>(APIURL + '/update/' + id, {file: exam.file, name: exam.naam});
}

但后端接口用@RequestParam接收参数，这是**表单格式（multipart/form-data或x-www-form-urlencoded）**的接收方式，和前端的JSON格式完全不匹配，会导致后端无法解析参数，甚至在预检阶段就触发异常。

结合你需要上传文件的场景，推荐以下解决方案：

方案：前端改用FormData传递参数 #

因为要上传文件，用FormData是最适配后端@RequestParam接收方式的：

updateExamById(id, exam: Examen): Observable<Examen> {
  const formData = new FormData();
  formData.append('file', exam.file); // exam.file需要是File类型对象
  formData.append('name', exam.naam);
  
  return this.http.put<Examen>(APIURL + '/update/' + id, formData, {
    headers: {
      'Content-Type': undefined // 让浏览器自动生成正确的multipart/form-data边界
    }
  });
}

额外排查点 #

• 检查是否存在配置冲突：如果你的Controller方法上还加了@CrossOrigin注解，可能会和全局CORS配置冲突，建议统一使用全局配置。
• 先测试后端接口：用Postman直接调用PUT接口，确认接口本身能正常工作，排除后端业务逻辑报错导致的浏览器CORS误提示。

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