如何实现WordPress Headless CMS对接React前端且保留原有站点？

核心原则：完全不改动现有WordPress站点 #

所有操作围绕调用WordPress原生REST API展开，不修改原站点代码、插件或主题，确保原站点正常运行。

1. 验证WordPress REST API可用性 #

WordPress默认自带REST API，无需额外插件或配置。直接在浏览器访问：

https://你的WordPress域名/wp-json/wp/v2/posts

能看到JSON格式的文章列表，说明API可用。如果返回404，仅需检查原站点是否启用了固定链接（设置→固定链接，选择非“朴素”模式），该操作属于WordPress常规设置，不会破坏站点。

2. React端处理跨域请求 #

由于React前端和WordPress大概率不在同一域名，推荐两种无侵入方案解决跨域：

• 本地开发代理：在React项目的package.json中添加：

  "proxy": "https://你的WordPress域名"
  

  之后代码中可用相对路径调用API，比如fetch('/wp-json/wp/v2/posts')，开发环境会自动转发请求到WordPress。
• 生产环境反向代理：部署React前端时，用Nginx配置反向代理，将API请求转发到WordPress，示例配置：

  location /wp-json/ {
      proxy_pass https://你的WordPress域名/wp-json/;
      proxy_set_header Host $host;
  }
  

  这样React前端可直接调用/wp-json/wp/v2/posts，无需跨域。

3. React端获取并渲染文章 #

用原生fetch或axios调用API，示例代码：

import { useEffect, useState } from 'react';
import DOMPurify from 'dompurify';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/wp-json/wp/v2/posts?_embed') // _embed参数获取封面图、作者等关联数据
      .then(res => res.json())
      .then(data => setPosts(data))
      .catch(err => console.error('获取文章失败:', err));
  }, []);

  return (
    <div className="post-list">
      {posts.map(post => (
        <div key={post.id} className="post-card">
          <h2>{post.title.rendered}</h2>
          {post._embedded?.['wp:featuredmedia']?.[0]?.source_url && (
            <img src={post._embedded['wp:featuredmedia'][0].source_url} alt={post.title.rendered} />
          )}
          <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(post.content.rendered) }} />
        </div>
      ))}
    </div>
  );
}

export default PostList;

• 用_embed参数可一次性获取关联数据，避免额外API调用。
• 用DOMPurify净化HTML内容，防止XSS攻击。

4. 确保双站点独立运行 #

• 原站点保持正常访问，所有原有功能不受影响，我们仅读取API数据，未修改WordPress任何业务逻辑。
• React前端可部署在独立域名（如blog.yourdomain.com）或子路径，用户可自主选择访问原站点或React前端。

5. 进阶优化（可选，无侵入原站点） #

• 缓存API请求：用React Query或SWR库缓存响应，减少重复请求，提升前端性能。
• 分页与筛选：通过API参数实现分页（page、per_page）、分类筛选（categories）、搜索（search）等功能，示例：

  /wp-json/wp/v2/posts?page=2&per_page=10&categories=5
  

• 自定义字段支持：若原站点已安装Advanced Custom Fields（ACF），可在ACF设置中开启REST API支持，直接在响应中获取自定义字段；未安装则用WordPress默认自定义字段即可。

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