本地XAMPP服务器与React前端CORS问题求助

问题根源 #

当请求携带Authorization这类自定义HTTP头时，浏览器会自动发送OPTIONS预检请求，验证服务器是否允许该请求。当前你的.htaccess配置会把OPTIONS请求转发到api.php，但api.php未处理OPTIONS请求，导致返回非200状态码，触发CORS拦截。

解决方案 #

方案一：通过.htaccess直接处理OPTIONS请求

修改kiosk2/api/.htaccess，添加OPTIONS请求的处理规则，并更新允许的请求头列表（加入Authorization）：

# 优先处理OPTIONS预检请求，直接返回200 OK
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 更新CORS响应头，允许Authorization头
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule !^src($|/) api.php [L]

方案二：在api.php中处理OPTIONS请求

如果不想修改.htaccess，可在api.php的最顶部添加代码，专门处理OPTIONS预检请求：

<?php
// 拦截OPTIONS请求，直接返回200状态码
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

// 你的原有API业务代码...

验证 #

修改后重启XAMPP服务器，重新发起带Authorization头的请求，CORS错误即可解决。

内容的提问来源于stack exchange，提问作者Tom Van Aken