Nuxt对接Symfony(Pimcore)后端出现CSRF Token不匹配问题求助

核心原因 #

你的问题本质是前后端跨容器请求时Session未正确共享：

• Nuxt前端请求Pimcore后端获取CSRF Token时，后端创建了一个Session并生成Token A；
• 提交POST请求时，前端未携带对应的Session Cookie，后端创建了新的Session，导致验证时从新Session取出的Token与Token A不一致。

分步解决方案 #

1. 修复Nuxt的Cookie Domain配置 #

cookieDomain不能包含http://协议头，这会导致Cookie无法正确绑定到域名，请求时不会自动携带：

env: {
    apiDomain: process.env.VUE_APP_API_DOMAIN || "http://localhost:8000/api",
    cookieDomain: process.env.COOKIE_DOMAIN || "localhost", // 移除http://
    cookieSecure: false
},

2. 配置Axios携带Credentials #

确保跨域请求时Axios自动携带Session Cookie，在nuxt.config.js中添加Axios配置：

axios: {
    withCredentials: true
}

如果使用自定义Axios实例，在请求时显式设置：

axios.post('/api/your-form-endpoint', formData, {
    withCredentials: true
})

3. 后端开启CORS Credentials支持 #

Pimcore基于Symfony，需要配置CORS允许携带Credentials，同时指定允许的前端Origin：

方法1：使用NelmioCorsBundle（推荐）

在config/packages/nelmio_cors.yaml中配置：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['^http://localhost:3000$'] # 替换为你的Nuxt服务地址
        allow_methods: ['GET', 'POST', 'OPTIONS']
        allow_headers: ['Content-Type', 'X-Requested-With']
        supports_credentials: true # 关键：允许携带Cookie
        max_age: 3600

方法2：手动添加响应头

如果未使用CORS Bundle，在返回CSRF Token的控制器中添加响应头：

public function getCsrfToken(Request $request): JsonResponse
{
    $token = $this->csrfTokenManager->getToken('enquire_form')->getValue();
    $response = new JsonResponse(['csrf_token' => $token]);
    
    // 允许前端Origin，替换为你的Nuxt地址
    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3000');
    $response->headers->set('Access-Control-Allow-Credentials', 'true');
    
    return $response;
}

4. 验证Session一致性（排查用） #

在后端打印Session ID，确认GET和POST请求是否使用同一个Session：

// GET请求获取Token时
$sessionId = $request->getSession()->getId();
$this->logger->info("GET Session ID: {$sessionId}, Token: {$token}");

// POST请求验证Token时
$sessionId = $request->getSession()->getId();
$submittedToken = $request->request->get('_csrf_token');
$this->logger->info("POST Session ID: {$sessionId}, Submitted Token: {$submittedToken}");

如果两个Session ID不同，说明Cookie未正确传递，回到前面的步骤排查。

5. 可选：统一Session存储（扩容场景） #

如果后续需要部署多个Pimcore容器，不要用容器本地文件存储Session，改用Redis/Memcached等共享存储：
在config/packages/framework.yaml中配置Redis Session：

framework:
    session:
        handler_id: Symfony\Component\HttpFoundation\Session\Storage\Handler\RedisSessionHandler
        cookie_domain: 'localhost'
        cookie_secure: false
        cookie_samesite: 'lax'

在config/services.yaml中配置Redis连接：

services:
    Symfony\Component\HttpFoundation\Session\Storage\Handler\RedisSessionHandler:
        arguments: ['%env(REDIS_URL)%']

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