React请求Symfony/API Platform静态文件报CORS错误如何解决？

核心问题定位 #

你遇到的CORS报错主要由两处配置错误导致，可按以下步骤逐一修复：

1. 修正NelmioCorsBundle配置规则 #

你当前nelmio_cors.yml的根路径规则下存在hosts: ['^api\.']限制，该规则要求只有api.开头的域名请求才会应用CORS配置，你本地请求的域名为localhost:8000，无法匹配该规则，因此CORS配置未生效。
修改方案如下：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['*']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
        hosts: []
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
            allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
            # 合并默认的headers配置，避免请求头不匹配被拦截
            allow_headers: ['Content-Type', 'Authorization', 'X-Custom-Auth']
            max_age: 3600
            # 移除hosts限制，或修改为匹配本地的规则如['^localhost$']
            # hosts: ['^api\.']

修改后重启Symfony服务使配置生效。

2. 处理静态资源的CORS头配置 #

你请求的是zip格式静态文件，如果该文件直接存放在Symfony的public目录下，默认会由Nginx/Apache等web服务器直接返回，不会经过Symfony的业务栈，NelmioCorsBundle的配置自然不会生效，因此响应没有CORS头。
两种修复方案二选一即可：

• 方案一：在web服务器层面添加静态资源的CORS头，以Nginx为例，在站点配置中添加如下规则：

  location ~* \.(zip|pdf|doc|docx)$ {
      add_header Access-Control-Allow-Origin "http://localhost:3000";
      add_header Access-Control-Allow-Methods "GET, OPTIONS";
      if ($request_method = OPTIONS) {
          return 204;
      }
  }
  

  修改后重启web服务器生效。
• 方案二：调整静态资源访问逻辑，改走Symfony自定义路由，由PHP读取文件返回响应，自动携带Nelmio配置的CORS头。

3. 移除前端错误配置 #

不要在axios请求中添加Access-Control-Allow-Origin请求头，该字段是服务端返回的响应头，前端主动添加会触发额外的预检请求校验，反而会导致CORS校验失败。

补充说明：Postman不会执行浏览器的同源策略校验，所以Postman请求正常不能作为CORS配置生效的判断依据。

验证方法 #

配置全部修改完成后，打开浏览器开发者工具的网络面板，查看对应请求的响应头，确认存在Access-Control-Allow-Origin字段，值为http://localhost:3000或*即可正常访问。

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