WordPress对接Express.js API无数据显示问题排查与解决

核心问题分析 #

你通过WordPress自定义REST接口中转Express.js API数据，但前端无数据展示，且无明确错误提示，需从网络连通性、请求配置、数据解析、前端调用四个维度逐一排查。

1. 容器/跨环境下的localhost访问限制 #

如果WordPress与Express.js运行在不同容器或主机上，localhost:3456会指向WordPress所在环境的本地，而非Express服务所在主机：

• 解决方案：将vehica_get_items函数中的$api_url替换为Express服务所在主机的实际IP（如http://192.168.1.100:3456/api/items），而非localhost。
• 验证：在WordPress服务器的命令行执行curl http://你的ExpressIP:3456/api/items，确认能拿到返回数据。

2. wp_remote_get请求配置缺失 #

默认wp_remote_get的超时时间短，且可能因SSL验证或扩展缺失导致请求失败：

• 修改请求配置，添加超时与SSL验证关闭（本地API无需SSL）：

function vehica_get_items(WP_REST_Request $request) {
    $api_url = 'http://192.168.1.100:3456/api/items';
    // 增加请求配置
    $response = wp_remote_get($api_url, [
        'timeout' => 10,
        'sslverify' => false
    ]);

    if (is_wp_error($response)) {
        error_log('WP请求错误: ' . $response->get_error_message());
        return new WP_Error('api_error', '获取数据失败', ['status' => 500]);
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);
    
    // 检查JSON解析是否成功
    if (json_last_error() !== JSON_ERROR_NONE) {
        error_log('JSON解析错误: ' . json_last_error_msg());
        return new WP_Error('json_error', '解析API响应失败', ['status' => 500]);
    }

    return rest_ensure_response($data);
}

• 额外检查：确认WordPress服务器的PHP配置中开启了allow_url_fopen，且安装了curl扩展。

3. 自定义REST接口的有效性验证 #

先确认WordPress中转接口本身能返回数据：

• 直接在浏览器访问http://example.com/wp-json/vehica/v1/items：
  • 如果返回Express的物品列表，说明中转接口正常，问题出在前端调用；
  • 如果返回错误，查看WordPress的debug.log（需开启WP_DEBUG和WP_DEBUG_LOG），根据日志提示修复。

4. 前端调用逻辑问题 #

PHP模板直接调用示例

确保主题模板中正确处理返回数据：

<?php
$api_response = wp_remote_get(get_site_url() . '/wp-json/vehica/v1/items');
if (!is_wp_error($api_response)) {
    $items = json_decode(wp_remote_retrieve_body($api_response), true);
    if (!empty($items)) {
        echo '<div class="items-list">';
        foreach ($items as $item) {
            // 替换为你实际的字段名，如name、price等
            echo '<div class="item">' . esc_html($item['name']) . '</div>';
        }
        echo '</div>';
    }
}
?>

JavaScript调用示例

确保JS代码在DOM加载完成后执行，且正确处理响应：

document.addEventListener('DOMContentLoaded', function() {
    fetch('/wp-json/vehica/v1/items')
        .then(response => {
            if (!response.ok) throw new Error('接口请求失败');
            return response.json();
        })
        .then(data => {
            console.log(data); // 先在控制台确认数据返回
            const container = document.getElementById('items-container');
            if (!container) return;
            
            data.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'item';
                itemElement.textContent = item.name; // 替换为实际字段
                container.appendChild(itemElement);
            });
        })
        .catch(error => console.error('获取数据失败:', error));
});

• 注意：页面中需存在id="items-container"的DOM元素。

5. 缓存与权限拦截 #

• 临时禁用WordPress缓存插件（如WP Rocket、W3 Total Cache），清除缓存后重试；
• 检查安全插件（如Wordfence）是否拦截了REST接口请求，需将/wp-json/vehica/v1/items添加到白名单。

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