React中Axios请求Namecheap部署的Laravel接口无Access-Control-Allow-Origin头如何解决

问题根因 #

• Laravel CORS配置存在规则冲突：supports_credentials 设为 true 时，浏览器禁止 allowed_origins 使用通配符 *，该规则为浏览器强制限制，无法绕过。
• 自定义CORS中间件存在逻辑错误：代码中提前执行了return response('OK', 200, $headers);，后续的OPTIONS请求判断逻辑完全不会运行，同时你额外添加的OPTIONS请求中间件返回的是空响应，未携带任何CORS头，导致预检请求直接校验失败。
• Namecheap搭载的LiteSpeed服务器默认会拦截OPTIONS请求，不会转发给Laravel处理，你在Laravel内部配置的所有CORS规则都未实际生效，这就是本地运行正常、部署后报错的核心原因。

可行解决步骤 #

1. 修正Laravel原生CORS配置 #

直接使用Laravel自带的CORS扩展即可，无需自定义中间件，修改config/cors.php配置如下：

'paths' => ['api/*'],
'allowed_methods' => ['*'],
// 如果不需要传递Cookie/认证凭证，可直接用*，同时设置supports_credentials为false
'allowed_origins' => ['https://landearn-web.vercel.app'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 86400,
// 如果allowed_origins用*，这里必须设为false
'supports_credentials' => true,

然后打开app/Http/Kernel.php，将CORS中间件添加到$middleware数组的最顶部，确保优先级高于所有其他中间件：

protected $middleware = [
    \Fruitcake\Cors\HandleCors::class,
    // 其他中间件放在后面
];

2. 配置LiteSpeed服务器规则 #

在Laravel项目public目录下的.htaccess文件最开头添加以下规则，让服务器直接处理OPTIONS请求并返回正确的CORS头：

# 全局CORS头配置
Header always set Access-Control-Allow-Origin "https://landearn-web.vercel.app"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
Header always set Access-Control-Max-Age "86400"
# 如需允许多个源可自行调整规则，用*的话需同步关闭supports_credentials

# 直接返回OPTIONS请求200响应，不转发到Laravel
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

3. 清理冲突代码与缓存 #

• 删除你自行添加的两个自定义CORS中间件，以及单独的OPTIONS请求处理中间件，避免规则冲突
• 部署后执行以下命令清理Laravel缓存：

php artisan config:clear
php artisan route:clear

验证方式 #

执行curl命令直接测试预检请求：

curl -I -X OPTIONS https://landearn.bumasys.com/api/signup

如果返回头中存在Access-Control-Allow-Origin字段，说明配置已生效。

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