本地Docker中Lumen API被React调用时出现CORS错误求助

问题分析 #

Postman不受浏览器CORS策略约束，因此能正常调用API，但React在浏览器环境发起请求时会触发预检OPTIONS请求，若服务器端CORS配置未生效或存在错误，就会出现CORS报错。

具体解决步骤 #

1. 确认CORS中间件已正确注册
   Lumen不会自动加载自定义中间件，需手动在bootstrap/app.php中注册路由中间件别名：

$app->routeMiddleware([
    'cors' => App\Http\Middleware\CorsMiddleware::class,
]);

如果希望全局生效，可添加到全局中间件列表：

$app->middleware([
    App\Http\Middleware\CorsMiddleware::class
]);

2. 移除前端请求中多余的请求头
   Access-Control-Allow-Origin是服务器返回给浏览器的响应头，前端请求时无需携带，删除React代码中对应配置：

// 修改前
const config = {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

// 修改后
const config = {} // 或保留其他必要头，如Content-Type

3. 优化CORS中间件逻辑
   调整中间件，动态获取请求Origin并完善OPTIONS请求处理：

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        // 动态获取请求来源，兼容带凭证的请求场景
        $origin = $request->header('Origin') ?? '*';
        
        $headers = [
            'Access-Control-Allow-Origin' => $origin,
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age' => '86400',
            'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With, Origin'
        ];

        // 直接返回空响应处理预检请求
        if ($request->isMethod('OPTIONS')) {
            return response()->make('', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

4. 验证Docker网络与端口配置
   确保容器的8081端口已正确映射到宿主机，且React所在环境能访问http://192.168.1.149:8081，可直接在浏览器地址栏访问API路径测试连通性。

5. 清除浏览器缓存
   浏览器可能缓存旧的CORS错误响应，使用无痕模式或清除缓存后重新测试。

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