主域React生产应用请求子域Laravel API遇CORS错误求助

问题背景 #

生产环境React应用部署在主域https://www.cli-domain.com，调用同服务器上Apache虚拟主机创建的子域https://admin.cli-domain.com的Laravel API时触发CORS错误。使用axios发起请求，客户端已设置Access-Control-Allow-Origin: *请求头；Laravel端尝试通过fruitcake/cors包配置中间件、修改.htaccess添加跨域头、调整Cors.php配置，但均未解决问题。

已尝试的配置 #

.htaccess配置 #

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

fruitcake/cors中间件配置 #

protected $middleware = [
    ...
\Fruitcake\Cors\HandleCors::class, # this line
];

Cors.php配置 #

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel CORS Options
    |--------------------------------------------------------------------------
    |
    | The allowed_methods and allowed_headers options are case-insensitive.
    |
    | You don't need to provide both allowed_origins and allowed_origins_patterns.
    | If one of the strings passed matches, it is considered a valid origin.
    |
    | If ['*'] is provided to allowed_methods, allowed_origins or allowed_headers
    | all methods / origins / headers are allowed.
    |
    */

    /*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => ['api/v1/tasker/profileupload', '*'],

    /*
    * Matches the request method. `['*']` allows all methods.
    */
    'allowed_methods' => ['POST', 'GET', 'DELETE', 'PUT', '*'],

    /*
     * Matches the request origin. `['*']` allows all origins. Wildcards can be used, eg `*.mydomain.com`
     */
    'allowed_origins' => ['https://www.doain-cus.com'],

    /*
     * Patterns that can be used with `preg_match` to match the origin.
     */
    'allowed_origins_patterns' => ['Google/'],

    /*
     * Sets the Access-Control-Allow-Headers response header. `['*']` allows all headers.
     */
    'allowed_headers' => ['X-Custom-Header', 'Upgrade-Insecure-Requests', '*'],

    /*
     * Sets the Access-Control-Expose-Headers response header with these headers.
     */
    'exposed_headers' => [],

    /*
     * Sets the Access-Control-Max-Age response header when > 0.
     */
    'max_age' => 0,

    /*
     * Sets the Access-Control-Allow-Credentials header.
     */
    'supports_credentials' => false,
];

解决方案 #

1. 修正Cors.php的源配置 #

• allowed_origins中填写的域名https://www.doain-cus.com是错误的，应替换为实际主域https://www.cli-domain.com；若需支持所有子域，可改为['https://*.cli-domain.com']
• 删除无效的allowed_origins_patterns配置（['Google/']与当前场景无关），如需正则匹配主域及子域，可改为：

  'allowed_origins_patterns' => ['/https:\/\/.*\.cli-domain\.com/'],
  

2. 处理凭证传递（若涉及） #

• 如果请求需要携带Cookie、HTTP认证等凭证，需将supports_credentials设为true
• 同时客户端axios需开启withCredentials：

  axios.defaults.withCredentials = true;
  

  注意：此时allowed_origins不能设为*，必须指定具体域名

3. 避免配置冲突 #

• 移除.htaccess中的所有CORS相关配置，避免与fruitcake/cors中间件重复设置响应头，导致浏览器报错

4. 确保中间件顺序正确 #

• 将\Fruitcake\Cors\HandleCors::class放在$middleware数组的最前端，保证CORS预检请求（OPTIONS）被优先处理

5. 确保Apache允许OPTIONS请求 #

• 在Apache虚拟主机配置中添加规则，避免拦截OPTIONS请求：

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

6. 清除Laravel缓存 #

• 执行以下命令使新配置生效：

  php artisan config:clear
  php artisan cache:clear
  

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