Slim Framework API跨域问题：AJAX请求因CORS Origin被拦截

嘿，这个坑我之前踩过！问题出在Slim响应对象的不可变性上——你调用withHeader()之后没有把返回的新响应对象赋值回去，导致原来的响应根本没带上你设置的头信息。下面给你几个靠谱的解决方案：

1. 正确处理单个路由的响应头 #

Slim的withHeader()、withJson()这类方法都会返回一个新的响应实例，而不是修改原对象。所以必须把新实例重新赋值给$response变量：

$app->get('/your-api-endpoint', function ($request, $response, $args) {
    // 你的业务逻辑，比如获取数据
    $responseData = ['status' => 'success', 'data' => []];

    // 关键：把修改后的响应对象重新赋值
    $response = $response
        ->withHeader('Access-Control-Allow-Origin', '*')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->withHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    return $response->withJson($responseData);
});

2. 处理OPTIONS预检请求 #

浏览器发送复杂AJAX请求（比如带自定义头、PUT/DELETE方法）前，会先发送OPTIONS预检请求。如果你的API没处理这个请求，浏览器会直接拦截后续请求。可以专门加一个路由处理所有OPTIONS请求：

$app->options('/{routes:.+}', function ($request, $response, $args) {
    return $response
        ->withHeader('Access-Control-Allow-Origin', '*')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->withHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
});

3. 用中间件全局配置CORS（推荐） #

如果你的API有很多路由，一个个加头太麻烦，用中间件可以全局给所有响应加上CORS头，一劳永逸：

// 全局中间件，放在路由定义之前
$app->add(function ($request, $handler) {
    // 先处理请求，得到响应
    $response = $handler->handle($request);
    
    // 给响应添加CORS头并返回
    return $response
        ->withHeader('Access-Control-Allow-Origin', '*')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->withHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
});

额外提醒 #

• 如果你的Slim版本是4.x，中间件的写法可能略有不同，但核心逻辑还是响应对象不可变，必须返回新实例。
• 如果你不需要允许所有域名，可以把*换成具体的域名，比如https://your-frontend-domain.com，更安全。

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