Slim4框架API配置CORS后预检请求不支持自定义请求头如何解决

核心报错原因是浏览器发起的OPTIONS预检请求没有正确返回允许Custom-Token头的CORS响应头，可按以下步骤逐一排查修复：

• 处理OPTIONS预检请求
  Slim默认没有为路由注册OPTIONS方法响应，预检请求会返回404状态码，此时Apache配置的响应头不会生效，可任选一种方案解决：
  方案1：添加全局Slim中间件统一处理所有OPTIONS请求，示例代码如下：

  <?php
  use Psr\Http\Message\ServerRequestInterface as Request;
  use Psr\Http\Server\RequestHandlerInterface as RequestHandler;
  use Slim\Psr7\Response;
  
  $app->add(function (Request $request, RequestHandler $handler) {
      $response = $handler->handle($request);
      // 统一添加CORS头
      $response = $response
          ->withHeader('Access-Control-Allow-Origin', '*')
          ->withHeader('Access-Control-Allow-Headers', 'Content-Type, Custom-Token')
          ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
      
      // 处理OPTIONS请求直接返回200
      if ($request->getMethod() === 'OPTIONS') {
          return new Response(200);
      }
      return $response;
  });
  

  方案2：在Apache配置中强制所有OPTIONS请求返回200，追加如下配置：

  <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_METHOD} OPTIONS
      RewriteRule ^(.*)$ $1 [R=200,L]
  </IfModule>
  

• 修正Apache配置
  原有配置缺少允许的请求方法声明，修改后完整配置如下：

  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Headers "Custom-Token, Content-Type"
  Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
  # 确保非200状态码响应也携带对应头
  Header always set Access-Control-Expose-Headers "Custom-Token"
  

  配置完成后需要重启Apache生效。
• 清理前端多余请求头
  前端请求不需要携带Access-Control-Allow-Headers字段，该字段为服务端返回的响应头，删除axios配置中的对应项即可：

  axios({
    method: 'get',
    url: 'http://localhost:8080/income/',
    headers: {
      'Content-Type': 'application/json',
      'Custom-Token': 'vvvv'
    },
    responseType: 'json'
  })
  .then(function (response) {
    console.log(response);
  }).catch(error => console.log(error));
  

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