WordPress 自定义 API 端点 POST 请求在 React 中失败

Posted 2023-03-04

【中文标题】WordPress 自定义 API 端点 POST 请求在 React 中失败

【英文标题】：WordPress custom API endpoint POST request fails in React

【发布时间】：2020-08-24 22:04:49

【问题描述】：

我有一个 WordPress 后端，我在其中向 API 添加了我自己的自定义端点：

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

我已经这样设置了我的环境：https://example.com 是 React 应用程序所在的位置，而 WordPress 位于 https://example.com/wp 上的子目录中

我的 React 应用程序向上述端点发出 POST 和 GET 请求。我有一个生产环境变量，我在其中设置 API 的基本 URL，即 https://example.com/wp/wp-json/game（“游戏”是我的命名空间），因此我可以使用 Axios 向 https://example.com/wp/wp-json/game/countries 和 https://example.com/wp/wp-json/game/check_answer 发出请求，问题就来了.

我的服务器已配置为使用 www 为 React 应用程序提供服务。所以https://example.com 和https://www.example.com 都服务于同一个应用程序。

但这会为我的自定义端点产生一些有趣的问题： GET 请求始终有效。 但 POST 请求仅在我从 https://example.com 尝试时才有效，而不是从 https://www.example.com 尝试。在后者的情况下，它只是向我显示一个失败的请求。没有反应，什么都没有。

我用谷歌搜索过，它似乎与 CORS 有关，但我无法修复它。这里有什么想法吗？

【问题讨论】：

浏览器在 devtools 控制台中记录的确切错误消息是什么？

您采取了哪些步骤来启用 CORS 请求发送到的服务器？

您可能需要设置其他标题，例如 Access-Control-Allow-Methods 等。也许这个 SO 问题会帮助你：***.com/questions/8719276/…

@DannyHobo 你能分享一些关于你本地开发环境的额外信息吗？ - 您的反应应用程序是否使用 CRA（创建反应应用程序）？ - 您是否在本地 WordPress 环境中使用 Laravel Valet 或类似工具？如果是这样，您使用的是 nginx 还是 Apache？ - 你的 React 应用程序使用 s-s-r 吗？ - 你在写故事书或类似的东西吗？我经常处理这个问题，但我需要一些额外的信息才能让你畅通无阻。

@AjeetShah 在下面的答案中看到，我尝试了 Shazyriver 提供的确切代码

【参考方案1】：

首先我想指出您的Get 请求有效，因为它们属于不会触发预检请求的类别。虽然您的 Post 请求可能使用了一些标头，该标头将其从类别中删除，因此需要预检才能通过。如果你有兴趣阅读更多，这里是文档链接。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

现在，根据您的评论，您得到的错误是

对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。

正如您在评论中提到的，您用于设置标头的方法不适用于休息请求。您可以在functions.php 或插件文件中使用以下函数将原点设置为*。

function sr_rest_send_cors_headers( $value ) 
   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;

add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

虽然我推荐 WordPress 默认执行的操作。如果您检查wp-includes/rest-api.php，您会发现我为您的目的修改的原始功能。如果你有兴趣看看，这里是 trac 链接。

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574

【讨论】：

谢谢，但还是没有运气。尝试了您在functions.php中提供的代码，但仍然是同样的错误。

@DannyHobo，您能否提供来自您的开发工具的网络选项卡的请求和响应标头的快照，用于此请求？以及出现错误的控制台快照。