Symfony 6与Angular集成遇CORS错误，求助解决

错误原因分析 #

错误提示明确指出：预检响应中的Access-Control-Allow-Headers不允许请求头字段access-control-allow-methods。核心问题在于：access-control-allow-methods是服务器返回的响应头，而非客户端应当发送的请求头。问题要么出在Angular请求错误携带了该头，要么是Symfony的CORS配置存在匹配异常。

分步解决方案 #

1. 修正NelmioCors的Origin配置 #

你的nelmio_cors.yaml中allow_origin带了末尾斜杠，会导致origin匹配失败（浏览器发送的origin是http://localhost:4200，无斜杠）：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['http://localhost:4200']  # 移除末尾斜杠
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        max_age: 3600
    paths:
        '^/': ~

2. 检查Angular请求头配置 #

排查Angular项目中的HTTP拦截器或请求代码，确认是否错误添加了access-control-allow-methods请求头——这个头不属于客户端请求范畴，必须移除。

如果需要显式控制请求头，可以按如下方式编写代码，确保无多余字段：

onSubmitFolder() {
  const folderForm = this.folderForm.value;
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
    // 禁止添加access-control-allow-methods
  });
  this.http.post('https://localhost:8000/folder/new', folderForm, { headers }).subscribe(
    (response) => {
      console.log(response);
    },
    (error) => {
      console.error(error);
    }
  );
}

3. 确保Symfony正确处理OPTIONS请求 #

NelmioCorsBundle会自动处理预检OPTIONS请求，但如果你的Symfony路由配置中对OPTIONS方法有额外限制，需确保路由允许OPTIONS方法，或移除相关限制规则。

4. 清理Symfony缓存 #

修改CORS配置后，必须清理缓存确保配置生效：

php bin/console cache:clear

若为生产环境，需添加--env=prod参数。

内容的提问来源于stack exchange，提问作者Bourdel Théo