求助：无法将TYPO3后端与nuxt-typo3前端应用建立连接

核心排查方向 #

1. 跨域(CORS)限制 #

前端http://localhost:3000访问HTTPS协议的TYPO3后端API，浏览器会触发跨域拦截。需在TYPO3后端配置CORS规则：

• 编辑typo3conf/LocalConfiguration.php，添加如下配置：

'FE' => [
    'cors' => [
        'allowOrigins' => ['http://localhost:3000'],
        'allowMethods' => ['GET', 'POST', 'OPTIONS'],
        'allowHeaders' => ['Content-Type', 'Authorization'],
        'allowCredentials' => true,
    ],
],

• 清除TYPO3缓存后生效。

2. Nuxt TYPO3模块配置错误 #

你的nuxt.config.js中TYPO3 API地址配置不完整：

• 当前api.baseURL为https://t3-pwa.ddev.site，但实际API地址是https://t3-pwa.ddev.site:4403/typo3/，需修正为完整端点；同时baseURL应指向前端自身地址：

typo3: {
  baseURL: 'http://localhost:3000', // 前端站点访问地址
  forms: true,
  api: {
    baseURL: 'https://t3-pwa.ddev.site:4403/typo3/' // 完整TYPO3 API端点
  },
},

3. 浏览器控制台错误排查 #

访问http://localhost:3000时打开浏览器开发者工具：

• 查看Network标签：检查TYPO3 API请求是否返回200，是否有跨域报错。
• 查看Console标签：捕获JS渲染错误、路由匹配失败等具体信息。

后端(TYPO3 11.5.x + Headless 3.1.2)配置 #

1. 确认Headless扩展已安装激活，且https://t3-pwa.ddev.site:4403/typo3/可正常返回JSON数据。
2. 添加上述CORS配置到LocalConfiguration.php，清除TYPO3缓存。

前端(Nuxt-TYPO3)配置 #

1. 在项目根目录创建并进入front文件夹：

mkdir front && cd front

2. 创建Nuxt-TYPO3应用，选择最简配置：

yarn create nuxt-typo3

• 配置建议：选择JavaScript、关闭Tailwind主题、启用nuxt-typo3模块。

3. 修改nuxt.config.js的TYPO3配置：

export default {
  buildModules: [
    'nuxt-typo3',
  ],
  typo3: {
    baseURL: 'http://localhost:3000',
    api: {
      baseURL: 'https://t3-pwa.ddev.site:4403/typo3/'
    },
  },
}

4. 创建基础页面pages/index.vue，渲染TYPO3页面数据：

<template>
  <div>
    <h1>{{ page.data.title }}</h1>
    <div v-html="page.data.bodytext"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ $typo3 }) {
    // 替换为你TYPO3中存在的页面UID
    const page = await $typo3.page.show({ uid: 1 })
    return { page }
  }
}
</script>

5. 启动前端服务：

yarn dev

6. 访问http://localhost:3000，即可看到TYPO3页面数据渲染结果。

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