WordPress Gutenberg区块调用外部API报rest_no_route错误如何解决

云上老周

2026-10-5

WordPress Gutenberg区块调用外部API报错解决方案

报错原因

你遇到的404报错是@wordpress/api-fetch库的默认机制导致的：

apiFetch默认是为WordPress自带的REST API设计的，传入path参数时，它会自动将路径拼接到当前站点的WP REST API根路径（通常是你的站点域名/wp-json/）之后
你传入外部域名路径时，实际请求的地址是{你的站点地址}/wp-json//gorest.co.in/public/v1/users，这个地址不存在对应路由，所以返回rest_no_route错误
调用WP内部API正常，正是因为路径拼接后刚好对应了WP自带的接口路由

解决方案

Gutenberg区块完全支持调用外部API，有两种常用实现方式：

方式1：使用原生fetch API（最简便）

直接使用浏览器原生的fetch方法发起请求，不受apiFetch的内置规则限制：

fetch( 'https://gorest.co.in/public/v1/users' )
  .then( response => {
    if (!response.ok) throw new Error('请求异常')
    return response.json()
  } )
  .then( data => {
    setState( { users: data } );
  } )
  .catch( error => console.error( '接口请求失败：', error ) );

方式2：使用apiFetch的url参数

如果你希望继续用apiFetch的内置能力（比如自动携带nonce、统一错误处理等），不要传path参数，改为传完整的url参数即可跳过自动路径拼接：

apiFetch( { 
  url: 'https://gorest.co.in/public/v1/users',
  method: 'GET'
} )
.then( (response) => {
  setState({users: response});
} )
.catch( error => console.error( '接口请求失败：', error ) );