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（“游戏”是我的命名空间），因此我可以使用 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 请求可能使用了一些标头，该标头将其从类别中删除，因此需要预检才能通过。如果你有兴趣阅读更多，这里是文档链接。

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