Contentful本地开发必须用反向代理（mod_proxy）配合多端口，因Preview API、Webhook等强制校验Origin且不接受localhost:3000；需启用mod_proxy、监听新端口（如8081）、配置VirtualHost反向代理至本地服务，并绑定hosts域名。
Contentful 本地代理不能直接靠 XAMPP 的 VirtualHost 实现，必须用反向代理（mod_proxy）配合端口监听，否则跨域或 Webhook 回调会失败。
为什么 Contentful 本地开发需要多端口 + 反向代理
Contentful 的前端预览、Webhook 测试、Preview API 调用都依赖真实域名和 HTTPS（或至少可配置的 Host + Port），而它不接受 localhost:3000 这类带端口的 origin。XAMPP 默认只服务 HTTP，且不自带代理能力。若强行用前端 dev server 直连 Contentful，会遇到：
- CORS 错误：浏览器拒绝
http://localhost:3000→https://cdn.contentful.com的请求（除非后端加 CORS header，但 Preview API 不允许） - Webhook 测试失败：Contentful 要求回调地址是公网可解析域名（如
webhook.local），且必须能被它主动发起 HTTP 请求 - Preview 模式无法加载：Contentful Preview API 强制校验
Originheader，只认你配在 space 设置里的域名
所以真正可行的路径是：让 XAMPP 同时监听多个端口，并把其中某个端口（如 :8081）设为反向代理入口，转发到本地 Node.js/Next.js 开发服务器（如 http://127.0.0.1:3000），同时用 hosts 绑定自定义域名。
启用 mod_proxy 和监听额外端口
XAMPP 默认禁用代理模块，且只监听 80。要支持 Contentful 场景，必须手动开启并添加端口：
XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin
- 打开
D:\xampp\apache\conf\httpd.conf（路径按你实际安装位置调整） - 取消以下三行的注释（去掉开头
#）：LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule proxy_connect_module modules/mod_proxy_connect.so
- 在
Listen 80下方新增一行：Listen 8081（或其他未被占用端口，可用netstat -ano | findstr :8081确认） - 确认
ServerName是localhost:8081（不是localhost:80，否则 Apache 启动报错）
配置 VirtualHost 做反向代理而非静态目录
不要把 DocumentRoot 指向文件夹，而是用 ProxyPass 把请求透传给你的前端开发服务：
- 编辑
D:\xampp\apache\conf\extra\httpd-vhosts.conf - 追加如下块（假设你前端跑在
http://127.0.0.1:3000，且希望用contentful.local访问）：<VirtualHost *:8081> ServerName contentful.local ProxyPreserveHost On ProxyRequests Off ProxyPass / http://127.0.0.1:3000/ ProxyPassReverse / http://127.0.0.1:3000/ <Location /> Require all granted </Location> </VirtualHost> - 注意：
ProxyPreserveHost On保证原始Host头（即contentful.local）透传给后端，这对 Contentful SDK 初始化和 Preview 模式至关重要 - 别漏掉
<location></location>权限段，否则 Apache 会返回 403
绑定域名 + 验证配置是否生效
这步跳过就全白配：
- 用管理员权限打开
C:\Windows\System32\drivers\etc\hosts - 末尾加一行：
127.0.0.1 contentful.local（不要写localhost或带端口） - 重启 Apache（XAMPP 控制面板里 Stop → Start）
- 运行
httpd -t检查语法（进D:\xampp\apache\bin目录双击httpd.exe或命令行执行）—— 出现Syntax OK才算通过 - 启动你的前端服务（如
npm run dev在 3000 端口） - 浏览器访问
http://contentful.local:8081，应等效于访问http://localhost:3000；此时所有 Contentful SDK 初始化、Preview API、Webhook 测试都能走这个域名
容易忽略的是：Contentful 的 Preview URL 设置里必须填 http://contentful.local:8081（不能省略端口），且 Webhook 测试目标地址也得是这个；另外 Chrome 有时会缓存 DNS，改完 hosts 后建议用无痕窗口验证。
