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

Question

我有一个 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 (“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 有关，但我无法修复它。这里有什么想法吗？

Answer 1

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

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

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

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

正如您在评论中提到的，您用于设置 header 的方法不适用于休息请求。您可以在 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